:root {
  --plum: #4a1a2a;
  --plum-2: #6b2a3c;
  --paper: #e9c9a0;
  --paper-2: #d8a878;
  --paper-3: #f3dcc0;
  --ink: #3b1d1d;
  --gold: #f5c84c;
  --reggel: #5b3c82;
  --nappal: #d98f4e;
  --napnyugta: #7c1517;
  --ejszaka: #10123a;
  --card-w: clamp(58px, min(12vw, 15vh), 118px);
  --radius: 14px;
  --shadow: 0 6px 20px rgba(40, 10, 20, .25);
  font-size: 16px;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: "Alegreya", Georgia, serif;
  color: var(--ink);
  background: var(--paper);
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}
h1, h2, h3, .btn, .topbar, .room-code, .turn-banner, .pill, .count {
  font-family: "Baloo 2", "Trebuchet MS", sans-serif;
}
h1, h2, h3 { color: var(--plum); margin: .2em 0 .4em; }
.hidden { display: none !important; }

/* ---------- képernyők ---------- */
.screen { display: none; min-height: 100vh; min-height: 100dvh; position: relative; }
#game { height: 100vh; height: 100dvh; }
body[data-screen="home"] #home,
body[data-screen="lobby"] #lobby,
body[data-screen="game"] #game { display: flex; }

.paper {
  flex-direction: column;
  align-items: center;
  padding: 16px 16px 40px;
  background:
    radial-gradient(ellipse at 20% 10%, rgba(255, 240, 215, .7), transparent 60%),
    radial-gradient(ellipse at 80% 90%, rgba(170, 100, 60, .25), transparent 60%),
    linear-gradient(160deg, var(--paper-3), var(--paper) 45%, var(--paper-2));
  overflow: hidden;
}

/* ---------- gombok, mezők ---------- */
.btn {
  border: 0;
  border-radius: 999px;
  padding: .7em 1.3em;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  background: #fff6ea;
  color: var(--plum);
  box-shadow: 0 2px 0 rgba(74, 26, 42, .25);
  transition: transform .12s, box-shadow .12s, background .2s;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(1px); box-shadow: none; }
.btn:disabled { opacity: .45; cursor: default; transform: none; }
.btn.primary { background: var(--plum); color: #fff3e2; box-shadow: 0 3px 0 #2c0e18; }
.btn.primary:hover { background: var(--plum-2); }
.btn.big { font-size: 1.15rem; padding: .85em 1.6em; width: 100%; }
.btn.small { font-size: .9rem; padding: .45em .9em; }
.btn.ghost { background: transparent; box-shadow: none; color: inherit; }
.btn.ghost:hover { background: rgba(255, 255, 255, .15); }
.btn.link { background: none; box-shadow: none; text-decoration: underline; font-weight: 500; }

input, select {
  font: inherit;
  font-size: 1.1rem;
  padding: .6em .8em;
  border-radius: 10px;
  border: 2px solid rgba(74, 26, 42, .25);
  background: #fffaf2;
  color: var(--ink);
  min-width: 0;
}
input:focus, select:focus { outline: none; border-color: var(--plum); }
.field { display: flex; flex-direction: column; gap: 4px; font-weight: 700; color: var(--plum); }

.card-panel {
  background: rgba(255, 246, 232, .72);
  border-radius: 22px;
  padding: 22px;
  box-shadow: var(--shadow);
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  z-index: 2;
}
.hint { font-size: .95rem; opacity: .8; margin: 0; }
.center { text-align: center; }

/* ---------- kezdőlap ---------- */
.hero { text-align: center; margin: 3vh 0 18px; position: relative; z-index: 2; }
.hero h1 { font-size: clamp(2.6rem, 9vw, 4.4rem); margin: 6px 0 0; letter-spacing: .01em; text-shadow: 0 3px 0 rgba(255, 240, 220, .8); }
.tagline { font-size: 1.15rem; margin: 4px 0 0; }
.spin { animation: spin 60s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.or { text-align: center; position: relative; opacity: .6; }
.or::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid currentColor; }
.or span { position: relative; background: #fbefdf; padding: 0 10px; }
.join-row { display: flex; gap: 8px; }
.join-row input { flex: 1; text-transform: uppercase; letter-spacing: .3em; text-align: center; font-family: "Baloo 2", sans-serif; }
.join-box { text-align: center; display: flex; flex-direction: column; gap: 8px; }
.join-box p { margin: 0; font-size: 1.1rem; }
.rules-link { align-self: center; }

/* ---------- váróterem ---------- */
.topbar {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  max-width: 900px;
  color: var(--plum);
}
.topbar-title { font-weight: 600; font-size: 1.1rem; }
.lobby-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 18px;
  width: 100%;
  max-width: 880px;
  margin-top: 12px;
  justify-items: center;
}
.invite { text-align: center; align-items: center; }
.room-code { font-size: 3rem; font-weight: 700; letter-spacing: .25em; color: var(--plum); margin-right: -.25em; }
.qr { background: #fff; border-radius: 16px; padding: 10px; width: min(230px, 70vw); aspect-ratio: 1; }
.qr svg, .qr canvas, .qr img { width: 100%; height: 100%; display: block; }

.link-row { display: flex; gap: 6px; width: 100%; }
.link-row input { flex: 1; font-size: .85rem; }
.lobby-players { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.lobby-players li {
  display: flex; align-items: center; gap: 10px;
  background: #fffaf2; border-radius: 12px; padding: 6px 10px;
  font-weight: 700; font-size: 1.05rem;
}
.lobby-players li.off { opacity: .5; }
.lobby-players .tag { font-family: "Baloo 2", sans-serif; font-size: .75rem; font-weight: 500; background: var(--gold); color: var(--plum); padding: 1px 8px; border-radius: 99px; }
.lobby-players .tag.bot { background: #2f8f86; color: #fff; }
#addBotBtn { align-self: flex-start; }
.lobby-players .grow { flex: 1; }
.settings { border-top: 1px dashed rgba(74, 26, 42, .3); padding-top: 8px; }
.settings h3 { font-size: 1rem; }
.settings .row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 6px 0; }
.settings .check { justify-content: flex-start; }
.settings input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--plum); }
.settings select { padding: .3em .5em; font-size: 1rem; }
.settings.readonly { pointer-events: none; opacity: .75; }

.avatar {
  width: 40px; height: 40px; border-radius: 50%;
  /* a figura fejére nagyítunk */
  background: #f6e3c8 no-repeat 50% 22% / 155%;
  display: inline-block; flex: none;
  box-shadow: inset 0 0 0 2px rgba(74, 26, 42, .18), 0 2px 4px rgba(74, 26, 42, .15);
}

/* ---------- játékasztal ---------- */
.table {
  flex-direction: column;
  color: #fff4e6;
  --bg1: #2b1d52; --bg2: #8a4a8f; --bg3: #f2a65a;
  background: linear-gradient(180deg, var(--bg1), var(--bg2) 60%, var(--bg3));
  transition: background 1s;
  padding-bottom: env(safe-area-inset-bottom);
  overflow: hidden;
}
body[data-phase="reggel"] .table { --bg1: #2f2563; --bg2: #8b4f9a; --bg3: #f4b26a; }
body[data-phase="nappal"] .table { --bg1: #3f86c4; --bg2: #8cc3df; --bg3: #f1c27b; }
body[data-phase="napnyugta"] .table { --bg1: #4a1030; --bg2: #b23a2a; --bg3: #f39a3c; }
body[data-phase="ejszaka"] .table { --bg1: #05061a; --bg2: #151a4a; --bg3: #2c2a6a; }
.table::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 45%, rgba(255, 255, 255, .14), transparent 55%);
}
.topbar.dark { color: #fff4e6; padding: 6px 10px; max-width: none; background: rgba(0, 0, 0, .18); }
.topbar-actions { display: flex; gap: 2px; }

.opponents {
  display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
  padding: 10px 8px 4px;
}
.opp {
  position: relative;
  background: rgba(0, 0, 0, .22);
  border-radius: 16px;
  padding: 6px 10px 6px 6px;
  display: flex; align-items: center; gap: 8px;
  min-width: 128px;
  border: 2px solid transparent;
  transition: border-color .3s, background .3s;
}
.opp.turn { border-color: var(--gold); background: rgba(0, 0, 0, .34); box-shadow: 0 0 18px rgba(245, 200, 76, .5); }
.opp.off { opacity: .5; }
.opp .nm { font-family: "Baloo 2", sans-serif; font-weight: 600; font-size: .95rem; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opp .mini-hand { display: flex; margin-top: 2px; height: 22px; }
.opp .mini-hand i {
  width: 15px; height: 21px; border-radius: 3px; margin-right: -9px;
  background: url(cards/hatlap.jpg) center/cover; box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
}
.opp .num { font-family: "Baloo 2", sans-serif; font-size: .8rem; margin-left: 12px; opacity: .9; }
.opp .kick { position: absolute; top: -8px; right: -8px; font-size: .7rem; padding: 2px 7px; }

.board {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  gap: clamp(14px, 5vw, 48px);
  padding: 8px;
  min-height: 0;
}
.pile { position: relative; height: clamp(96px, 28vh, 250px); aspect-ratio: 5 / 7; }
.pile img, .card img { width: 100%; height: 100%; display: block; border-radius: 7%/5%; }
.deck { cursor: pointer; }
.deck img { box-shadow: 3px 3px 0 #2a1a40, 6px 6px 0 #1b1030, 0 10px 24px rgba(0, 0, 0, .45); transition: transform .15s; }
.deck.can img { animation: glow 1.4s ease-in-out infinite alternate; }
.deck:hover img { transform: translateY(-3px); }
@keyframes glow { to { box-shadow: 3px 3px 0 #2a1a40, 6px 6px 0 #1b1030, 0 0 26px 6px rgba(245, 200, 76, .8); } }
.pile .count {
  position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%);
  background: rgba(0, 0, 0, .55); padding: 2px 10px; border-radius: 99px; font-size: .8rem;
}
.discard img { box-shadow: 0 10px 30px rgba(0, 0, 0, .5); position: absolute; inset: 0; }
.discard img.under { transform: rotate(-6deg); filter: brightness(.8); }

@keyframes land { from { transform: translateY(-40px) scale(1.15) rotate(8deg); opacity: .3; } }

.clock { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.clock-disc { position: relative; width: clamp(60px, min(15vw, 17vh), 130px); aspect-ratio: 1; }
.clock-disc img { width: 100%; border-radius: 50%; box-shadow: 0 6px 20px rgba(0, 0, 0, .4); }
.clock-hi { position: absolute; inset: 0; transition: transform .8s cubic-bezier(.5, 1.6, .5, 1); }
.clock-hi path { fill: rgba(255, 255, 255, .22); stroke: var(--gold); stroke-width: 3; stroke-linejoin: round; }
.dir { font-family: "Baloo 2", sans-serif; font-size: .85rem; background: rgba(0, 0, 0, .3); padding: 2px 10px; border-radius: 99px; }
.dir.rev { background: #e0393e; }

.status { text-align: center; padding: 0 12px; }
.turn-banner { font-size: 1.15rem; font-weight: 600; }
.turn-banner.mine { color: var(--gold); text-shadow: 0 0 12px rgba(245, 200, 76, .6); }
.req { font-size: .95rem; opacity: .9; min-height: 1.3em; }

.me-bar { display: flex; align-items: center; justify-content: space-between; padding: 2px 12px; gap: 8px; }
.me-info { display: flex; align-items: center; gap: 8px; font-family: "Baloo 2", sans-serif; }
.me-info .avatar { width: 32px; height: 32px; }
.me-info.turn b { color: var(--gold); }
.pill { background: rgba(0, 0, 0, .3); padding: 1px 9px; border-radius: 99px; font-size: .85rem; }
.me-actions { display: flex; gap: 8px; align-items: center; }
.draw-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 1.15rem; font-weight: 700; padding: .55em 1.2em .55em .7em;
  background: linear-gradient(180deg, #ffd96b, #f0a93a); color: #4a1a2a;
  border-radius: 16px; box-shadow: 0 4px 0 #a8641c, 0 6px 16px rgba(240, 169, 58, .45);
}
.draw-btn:not(:disabled):hover { filter: brightness(1.06); transform: translateY(-1px); }
.draw-btn:not(:disabled):active { transform: translateY(3px); box-shadow: 0 1px 0 #a8641c; }
.draw-btn:disabled { background: rgba(255, 255, 255, .25); color: inherit; box-shadow: none; opacity: .5; }
.draw-ico {
  width: 22px; height: 30px; border-radius: 4px; flex: none;
  background: url(cards/hatlap.jpg) center/cover;
  box-shadow: 3px -3px 0 -1px #fff3e2, 3px -3px 0 0 rgba(74, 26, 42, .4), 0 1px 3px rgba(0, 0, 0, .4);
  transform: rotate(-8deg);
}
.draw-btn.urge { animation: urge 1.1s ease-in-out infinite; }
@keyframes urge {
  0%, 100% { transform: scale(1); box-shadow: 0 4px 0 #a8641c, 0 0 0 0 rgba(255, 217, 107, .7); }
  50% { transform: scale(1.08); box-shadow: 0 4px 0 #a8641c, 0 0 0 12px rgba(255, 217, 107, 0); }
}

.hand {
  display: flex; justify-content: center;
  padding: 16px 16px max(16px, env(safe-area-inset-bottom));
  overflow-x: auto; overflow-y: visible;
  scrollbar-width: thin;
  min-height: calc(var(--card-w) * 1.4 + 32px);
}
.hand.many { justify-content: flex-start; }
.card {
  flex: none; width: var(--card-w); aspect-ratio: 5 / 7;
  margin-right: calc(var(--card-w) * -.28);
  border: 0; padding: 0; background: none; cursor: pointer;
  transition: transform .18s, filter .2s, margin .2s;
  border-radius: 7%/5%;
  box-shadow: 0 6px 14px rgba(0, 0, 0, .4);
}
.card:last-child { margin-right: 0; }
.card:hover, .card:focus-visible { transform: translateY(-14px) scale(1.06); z-index: 3; outline: none; }
.hand.mine .card.ok { transform: translateY(-10px); box-shadow: 0 0 0 3px var(--gold), 0 10px 20px rgba(0, 0, 0, .45); }
.hand.mine .card.ok:hover { transform: translateY(-20px) scale(1.07); }
.hand.mine .card.no { filter: brightness(.6) saturate(.7); }
.hand:not(.mine) .card { filter: brightness(.85); }
.card.shake { animation: shake .35s; }
.card.enter { animation: deal .4s ease-out; }
@keyframes shake { 25% { translate: -6px; } 50% { translate: 6px; } 75% { translate: -4px; } }
@keyframes deal { from { opacity: 0; transform: translateY(-60px) rotate(-10deg); } }

.float-num {
  position: fixed; z-index: 50; pointer-events: none;
  font-family: "Baloo 2", sans-serif; font-weight: 700; font-size: 1.8rem; color: #ffdf6b;
  text-shadow: 0 2px 6px rgba(0, 0, 0, .6);
  animation: floatUp 1.4s ease-out forwards;
}
@keyframes floatUp { to { transform: translateY(-60px); opacity: 0; } }

.log {
  position: fixed; right: 0; top: 0; bottom: 0; width: min(340px, 88vw); z-index: 40;
  background: rgba(20, 10, 30, .92); color: #fff4e6; padding: 12px 14px; overflow-y: auto;
  box-shadow: -8px 0 24px rgba(0, 0, 0, .4);
}
.log h3 { color: #fff4e6; display: flex; justify-content: space-between; align-items: center; }
.log ol { padding-left: 18px; margin: 0; display: flex; flex-direction: column-reverse; gap: 6px; font-size: .95rem; }

/* ---------- modálok ---------- */
.modal {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(20, 8, 20, .55); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.modal-box {
  background: #fbf0e0; color: var(--ink); border-radius: 22px; padding: 22px;
  width: 100%; max-width: 440px; max-height: 92vh; overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .4); text-align: center; position: relative;
  animation: pop2 .2s ease-out;
}
@keyframes pop2 { from { transform: scale(.92); opacity: 0; } }
.choice-list { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.choice-list .btn { display: flex; align-items: center; gap: 10px; justify-content: flex-start; }
.phase-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0; }
.ph {
  border: 0; border-radius: 14px; padding: 8px; color: #fff; cursor: pointer;
  font-family: "Baloo 2", sans-serif; font-weight: 600; font-size: 1rem;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  transition: transform .12s;
}
.ph:hover { transform: scale(1.04); }
.ph img { width: 70%; border-radius: 6px; }
.ph-reggel { background: var(--reggel); }
.ph-nappal { background: var(--nappal); }
.ph-napnyugta { background: var(--napnyugta); }
.ph-ejszaka { background: var(--ejszaka); }
.win .win-art { width: 130px; animation: hop .9s ease-in-out infinite; transform-origin: 50% 100%; }

@keyframes hop {
  0%, 60%, 100% { transform: translateY(0) scale(1, 1); }
  20% { transform: translateY(0) scale(1.08, .9); }
  38% { transform: translateY(-14px) scale(.95, 1.06) rotate(-3deg); }
}
.win { display: flex; flex-direction: column; gap: 10px; }
.scores { list-style: none; padding: 0; margin: 0; text-align: left; }
.scores li { display: flex; justify-content: space-between; padding: 4px 8px; border-bottom: 1px dashed rgba(74, 26, 42, .2); }

.rules { text-align: left; max-width: 640px; }
.rules h2 { text-align: center; font-size: 2rem; }
.rules h3 { margin-top: 1em; }
.rules ol { padding-left: 20px; }
.rules li { margin-bottom: 6px; }
.close-x { position: absolute; right: 10px; top: 10px; }
.special-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.special-list li { display: flex; gap: 10px; align-items: center; }
.special-list img { width: 52px; border-radius: 5px; flex: none; box-shadow: 0 2px 6px rgba(0, 0, 0, .3); }

.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 80;
  background: #2b1020; color: #fff; padding: 10px 18px; border-radius: 12px;
  box-shadow: var(--shadow); max-width: 90vw; text-align: center;
  animation: pop2 .2s ease-out;
}
.conn {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90; text-align: center;
  background: #e0393e; color: #fff; padding: 6px; font-family: "Baloo 2", sans-serif;
}

/* =====================================================================
   Égbolt: a nap/hold a napszaknak megfelelően vándorol
   ===================================================================== */
.table > *:not(.sky) { position: relative; z-index: 1; }
.table > .log { position: fixed; z-index: 40; }
.sky { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.stars {
  position: absolute; inset: -10%;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%, #fff, transparent),
    radial-gradient(1px 1px at 28% 42%, #fff, transparent),
    radial-gradient(2px 2px at 44% 12%, #fff8d0, transparent),
    radial-gradient(1px 1px at 62% 30%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 78% 8%, #fff, transparent),
    radial-gradient(1px 1px at 86% 38%, #fff, transparent),
    radial-gradient(2px 2px at 92% 22%, #fff8d0, transparent),
    radial-gradient(1px 1px at 6% 52%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 52% 55%, #fff, transparent),
    radial-gradient(1px 1px at 36% 66%, #fff, transparent),
    radial-gradient(1px 1px at 18% 30%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 70% 60%, #fff, transparent);
  opacity: 0; transition: opacity 1.5s;
  animation: twinkle 4s ease-in-out infinite alternate;
}
@keyframes twinkle { to { filter: brightness(1.8); transform: translateY(-4px); } }
body[data-phase="ejszaka"] .stars { opacity: 1; }
body[data-phase="reggel"] .stars { opacity: .35; }
.celestial {
  position: absolute; width: clamp(70px, 16vmin, 150px); aspect-ratio: 1; border-radius: 50%;
  left: 10%; top: 60%;
  background: radial-gradient(circle at 40% 40%, #fff6c8, #ffd451 55%, #ffb12e);
  box-shadow: 0 0 60px 20px rgba(255, 210, 90, .55), 0 0 160px 60px rgba(255, 190, 80, .25);
  transition: left 1.6s cubic-bezier(.4, 0, .2, 1), top 1.6s cubic-bezier(.4, 0, .2, 1), background 1.6s, box-shadow 1.6s, transform 1.6s;
  opacity: .9;
}
body[data-phase="reggel"] .celestial { left: 6%; top: 46%; transform: scale(.85); background: radial-gradient(circle at 40% 40%, #fff1d6, #ffb36b 60%, #ff8a5c); }
body[data-phase="nappal"] .celestial { left: calc(50% - 8vmin); top: 4%; transform: scale(1); }
body[data-phase="napnyugta"] .celestial { left: 78%; top: 52%; transform: scale(1.25); background: radial-gradient(circle at 40% 40%, #ffe0a0, #ff7a2e 55%, #d7361d); box-shadow: 0 0 80px 30px rgba(255, 110, 40, .55); }
body[data-phase="ejszaka"] .celestial {
  left: 74%; top: 6%; transform: scale(.7);
  background: radial-gradient(circle at 35% 35%, #fffef0, #e9e6c8 60%, #c7c39a);
  box-shadow: 0 0 40px 10px rgba(230, 230, 255, .35), inset -18px -6px 0 0 rgba(10, 12, 40, .9);
}
.cloud {
  position: absolute; height: 40px; width: 160px; border-radius: 40px; background: rgba(255, 255, 255, .55);
  filter: blur(2px); opacity: 0; transition: opacity 1.5s;
  animation: drift 40s linear infinite;
}
.cloud::before, .cloud::after { content: ""; position: absolute; background: inherit; border-radius: 50%; }
.cloud::before { width: 70px; height: 70px; left: 25px; top: -35px; }
.cloud::after { width: 50px; height: 50px; left: 80px; top: -22px; }
.cloud.c1 { top: 20%; left: -20%; }
.cloud.c2 { top: 34%; left: -40%; animation-duration: 60s; animation-delay: -20s; scale: .7; }
@keyframes drift { to { translate: 160vw; } }
body[data-phase="nappal"] .cloud { opacity: .9; }
body[data-phase="reggel"] .cloud { opacity: .35; }

/* =====================================================================
   Effektek
   ===================================================================== */
#fxLayer { position: fixed; inset: 0; pointer-events: none; z-index: 70; overflow: hidden; }
#confetti { position: fixed; inset: 0; pointer-events: none; z-index: 65; width: 100%; height: 100%; }
.fly { position: fixed; left: 0; top: 0; border-radius: 7%/5%; box-shadow: 0 14px 30px rgba(0, 0, 0, .5); will-change: transform; }
.spark { position: fixed; left: 0; top: 0; width: 10px; height: 10px; border-radius: 50%; will-change: transform, opacity; }
.shock { position: fixed; left: 0; top: 0; border-radius: 50%; border: 4px solid var(--gold); will-change: transform, opacity; }
.stamp {
  position: fixed; left: 0; top: 0;
  font-family: "Baloo 2", sans-serif; font-weight: 700; font-size: clamp(1.3rem, 6vw, 2.4rem);
  color: #fff; background: #e0393e; padding: .15em .6em; border-radius: 12px; border: 4px solid #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45); white-space: nowrap; letter-spacing: .03em;
}
.stamp.gold { background: #f2b51e; color: var(--plum); }
.stamp.blue { background: #3d5bd9; }
.banner {
  position: fixed; left: 0; right: 0; top: 50%;
  padding: 22px 16px; text-align: center; color: #fff;
  font-family: "Baloo 2", sans-serif;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .45);
}
.banner .big { font-size: clamp(2.2rem, 11vw, 4.5rem); font-weight: 700; line-height: 1; text-shadow: 0 4px 0 rgba(0, 0, 0, .25); }
.banner .small { font-size: clamp(.9rem, 3.5vw, 1.2rem); opacity: .9; margin-top: 6px; }
.banner img { width: clamp(56px, 14vw, 90px); border-radius: 50%; margin-bottom: 6px; }
.banner img.szaki { width: clamp(80px, 20vw, 130px); border-radius: 0; filter: drop-shadow(0 6px 10px rgba(0,0,0,.35)); animation: hop .9s ease-in-out infinite; }
.banner.reggel { background: linear-gradient(90deg, transparent, #5b3c82 15%, #b0628f 50%, #5b3c82 85%, transparent); }
.banner.nappal { background: linear-gradient(90deg, transparent, #d98f4e 15%, #f2c35a 50%, #d98f4e 85%, transparent); }
.banner.napnyugta { background: linear-gradient(90deg, transparent, #7c1517 15%, #e0582b 50%, #7c1517 85%, transparent); }
.banner.ejszaka { background: linear-gradient(90deg, transparent, #10123a 15%, #2c2f7a 50%, #10123a 85%, transparent); }
.banner.rev { background: linear-gradient(90deg, transparent, #3a1050 15%, #8b2fb0 50%, #3a1050 85%, transparent); }
.banner.turn { background: linear-gradient(90deg, transparent, #b8860b 15%, #f5c84c 50%, #b8860b 85%, transparent); color: var(--plum); padding: 14px; }
.flash { position: fixed; inset: 0; background: #fff; }
.vignette { position: fixed; inset: 0; box-shadow: inset 0 0 120px 40px rgba(224, 57, 62, .8); }
.target-hit { animation: shakeX .45s; }
@keyframes shakeX { 20% { translate: -8px; } 40% { translate: 8px; } 60% { translate: -5px; } 80% { translate: 4px; } }
.turn-banner.mine { animation: pulseTurn 1.2s ease-in-out infinite; }
@keyframes pulseTurn { 50% { transform: scale(1.08); } }
.discard.hit { animation: hit .4s ease-out; }
@keyframes hit { 30% { transform: scale(1.1) rotate(-3deg); } }
.clock-disc.spin-rev { animation: spinRev 1.2s cubic-bezier(.3, 0, .2, 1); }
@keyframes spinRev { to { transform: rotate(-720deg); } }
.clock-disc.spin-jump { animation: spinJump 1s cubic-bezier(.3, 0, .2, 1); }
@keyframes spinJump { 50% { transform: rotate(540deg) scale(1.25); } to { transform: rotate(1080deg); } }

/* kiválasztott lap (érintőképernyőn az első koppintás kiemeli, a második lerakja) */
.card { position: relative; touch-action: manipulation; }
button, .pile { touch-action: manipulation; }
.hand .card.sel {
  transform: translateY(-38%) scale(1.35) !important; z-index: 6;
  box-shadow: 0 0 0 3px #fff, 0 0 26px 6px rgba(245, 200, 76, .9), 0 16px 30px rgba(0, 0, 0, .5) !important;
  filter: none !important;
}
.hand .card.sel::after {
  content: "Koppints újra a lerakáshoz"; position: absolute; left: 50%; top: 6px; transform: translateX(-50%) scale(.72);
  white-space: nowrap; font-family: "Baloo 2", sans-serif; font-size: 12px; background: var(--plum); color: #fff;
  padding: 2px 8px; border-radius: 99px;
}
.hand .card.sel.no::after { content: "Ezt most nem rakhatod le"; background: #e0393e; }

/* =====================================================================
   Telefon
   ===================================================================== */
@media (max-width: 600px) {
  :root { --card-w: min(23vw, 16vh); }
  .room-code { font-size: 2.4rem; }
  .topbar.dark { padding: 2px 6px; padding-top: max(2px, env(safe-area-inset-top)); }
  .topbar.dark .topbar-title { font-size: .95rem; }
  .opponents {
    flex-wrap: nowrap; justify-content: safe center; overflow-x: auto;
    padding: 8px 10px 16px; gap: 6px; scrollbar-width: none;
  }
  .opponents::-webkit-scrollbar { display: none; }
  .opp { flex: none; gap: 6px; padding: 4px 12px 4px 4px; border-radius: 99px; min-width: 0; }
  .opp .avatar { width: 32px; height: 32px; }
  .opp .nm { max-width: 80px; font-size: .85rem; }
  .opp .mini-hand i { display: none; }
  .opp .mini-hand { height: auto; margin-top: 0; }
  .opp .num { margin-left: 0; font-size: .78rem; }
  .opp .num::after { content: " lap"; }
  .board { gap: 12px; padding: 4px 8px; }
  .pile { height: clamp(88px, 22vh, 190px); }
  .clock-disc { width: clamp(54px, 15vw, 90px); }
  .dir { font-size: .72rem; }
  .status { padding: 0 10px; }
  .turn-banner { font-size: 1.05rem; }
  .req { font-size: .82rem; line-height: 1.25; }
  .me-bar { padding: 0 10px; }
  .draw-btn { font-size: 1.05rem; padding: .5em 1em .5em .6em; }
  .hand { padding: 30px 8px max(12px, env(safe-area-inset-bottom)); overflow: visible; }
  .card:hover, .card:focus-visible { transform: none; }
  .hand.mine .card.ok:hover { transform: translateY(-10px); }
  .log { width: 100vw; }
  .modal-box { padding: 18px 14px; border-radius: 18px; }
  .phase-grid { gap: 8px; }
}
@media (max-width: 600px) and (max-height: 700px) {
  .pile { height: clamp(78px, 19vh, 150px); }
  .req { font-size: .75rem; }
}


/* legyező: a JS minden laphoz --rot (dőlés) és --arc (ív) értéket ad */
.card { transform-origin: 50% 120%; transform: translateY(var(--arc, 0px)) rotate(var(--rot, 0deg)); }
.card:hover, .card:focus-visible { transform: translateY(calc(var(--arc, 0px) - 16px)) rotate(var(--rot, 0deg)) scale(1.06); }
.hand.mine .card.ok { transform: translateY(calc(var(--arc, 0px) - 10px)) rotate(var(--rot, 0deg)); }
.hand.mine .card.ok:hover { transform: translateY(calc(var(--arc, 0px) - 22px)) rotate(var(--rot, 0deg)) scale(1.07); }
.hand { justify-content: flex-start !important; overflow: visible; }
@media (hover: none) {
  .card:hover, .card:focus-visible { transform: translateY(var(--arc, 0px)) rotate(var(--rot, 0deg)); }
  .hand.mine .card.ok:hover { transform: translateY(calc(var(--arc, 0px) - 10px)) rotate(var(--rot, 0deg)); }
}

/* =====================================================================
   KEZDŐLAP ÉS VÁRÓTEREM – folyamatosan váltakozó napszakok, futó szakik
   ===================================================================== */
:root { --day: 48s; }
body:not([data-screen="game"]) { background: #2a1f4a; }
body:not([data-screen="game"]) .screen.paper { background: none; }
.daysky { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; display: none; }
body:not([data-screen="game"]) .daysky { display: block; }
.screen.paper { z-index: 1; }

/* négy égbolt, egymásba úszva: reggel → nappal → napnyugta → éjszaka */
.ds-layer { position: absolute; inset: 0; opacity: 0; animation: ds-fade var(--day) linear infinite; }
.ds-reggel { background: linear-gradient(180deg, #4b3a8c 0%, #b9629a 45%, #f6a96b 80%, #ffd58a 100%); animation-delay: calc(var(--day) * -0.96); }
.ds-nappal { background: linear-gradient(180deg, #3f9be0 0%, #79c3f0 50%, #cfeefc 85%, #fdf3cf 100%); animation-delay: calc(var(--day) * -0.71); }
.ds-napnyugta { background: linear-gradient(180deg, #2b1d5c 0%, #8a2b5e 40%, #e0503a 72%, #ffb24a 100%); animation-delay: calc(var(--day) * -0.46); }
.ds-ejszaka { background: linear-gradient(180deg, #05061c 0%, #10123a 50%, #2a2560 100%); animation-delay: calc(var(--day) * -0.21); }
@keyframes ds-fade { 0% { opacity: 0; } 4% { opacity: 1; } 25% { opacity: 1; } 29% { opacity: 0; } 100% { opacity: 0; } }

.ds-stars {
  position: absolute; inset: 0 0 30% 0; opacity: 0;
  background-image:
    radial-gradient(2px 2px at 12% 18%, #fff, transparent), radial-gradient(1.5px 1.5px at 28% 42%, #fff, transparent),
    radial-gradient(2px 2px at 44% 12%, #fff, transparent), radial-gradient(1.5px 1.5px at 61% 30%, #fff, transparent),
    radial-gradient(2.5px 2.5px at 78% 16%, #fff8d0, transparent), radial-gradient(1.5px 1.5px at 88% 46%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 6% 60%, #fff, transparent), radial-gradient(2px 2px at 36% 66%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 70% 58%, #fff, transparent), radial-gradient(2px 2px at 95% 8%, #fff, transparent);
  animation: ds-stars var(--day) linear infinite;
  animation-delay: calc(var(--day) * -0.96);
}
@keyframes ds-stars { 0%, 70% { opacity: 0; } 79%, 96% { opacity: 1; } 100% { opacity: 0; } }

/* a nap és a hold egy közös pálya két végén kering */
.ds-orbit {
  --R: min(78vh, 88vw);
  position: absolute; left: 50%; bottom: 8vh; width: 0; height: 0;
  animation: ds-orbit var(--day) linear infinite;
  animation-delay: calc(var(--day) * -0.96);
}
@keyframes ds-orbit { from { transform: rotate(-135deg); } to { transform: rotate(225deg); } }
.ds-sun, .ds-moon { position: absolute; left: 0; border-radius: 50%; transform: translate(-50%, -50%); }
.ds-sun {
  width: clamp(70px, 14vmin, 130px); height: clamp(70px, 14vmin, 130px); top: calc(var(--R) * -1);
  background: radial-gradient(circle at 40% 40%, #fff6c4, #ffd34d 45%, #ff9f2e 75%);
  box-shadow: 0 0 60px 20px rgba(255, 196, 80, .55), 0 0 140px 50px rgba(255, 160, 60, .25);
}
.ds-moon {
  width: clamp(54px, 11vmin, 100px); height: clamp(54px, 11vmin, 100px); top: var(--R);
  background: radial-gradient(circle at 68% 38%, transparent 40%, #fff4c2 42%);
  filter: drop-shadow(0 0 22px rgba(255, 244, 194, .7));
}
.ds-cloud {
  position: absolute; width: 180px; height: 56px; border-radius: 60px; background: rgba(255, 255, 255, .55);
  animation: ds-cloud 70s linear infinite;
}
.ds-cloud::before, .ds-cloud::after { content: ""; position: absolute; background: inherit; border-radius: 50%; }
.ds-cloud::before { width: 80px; height: 80px; left: 26px; top: -38px; }
.ds-cloud::after { width: 64px; height: 64px; left: 88px; top: -26px; }
.ds-cloud.a { top: 16%; animation-duration: 75s; animation-delay: -20s; }
.ds-cloud.b { top: 32%; scale: .7; animation-duration: 95s; animation-delay: -60s; opacity: .7; }
.ds-cloud.c { top: 9%; scale: .5; animation-duration: 120s; animation-delay: -5s; opacity: .6; }
@keyframes ds-cloud { from { left: -220px; } to { left: 110%; } }

/* a napszak neve, a háttérben */
.ds-phase {
  position: absolute; right: 14px; top: calc(env(safe-area-inset-top) + 12px); padding: 2px 12px; border-radius: 99px; background: rgba(0, 0, 0, .18); font-family: "Baloo 2", sans-serif; font-weight: 700;
  color: rgba(255, 255, 255, .85); text-shadow: 0 2px 8px rgba(0, 0, 0, .4); font-size: .95rem; letter-spacing: .08em;
  text-transform: uppercase; transition: opacity .6s;
}

/* cím: hullámzó, csillogó betűk */
.hero { margin: 4vh 0 16px; display: flex; flex-direction: column; align-items: center; }
/* a cím a doboz felirata szerint: Fredoka betűk egy narancs–lila, középen behúzott táblán */
.plaque { filter: drop-shadow(0 6px 0 rgba(40, 10, 30, .35)) drop-shadow(0 14px 24px rgba(20, 5, 30, .35)); }
.title {
  font-family: "Fredoka", "Baloo 2", sans-serif; font-weight: 700; font-size: clamp(2.8rem, 12vw, 5.2rem);
  margin: 0; line-height: 1; display: inline-flex; color: #6b1a68;
  padding: .2em .55em .26em; border-radius: .32em;
  background: linear-gradient(180deg, #f2a73a 0%, #d9884a 38%, #a7627a 72%, #84497f 100%);
  box-shadow: inset 0 .06em 0 rgba(255, 240, 200, .45), inset 0 -.08em 0 rgba(60, 10, 50, .3);
  -webkit-mask: radial-gradient(1.3em .34em at 50% -.12em, #0000 97%, #000 100%) top / 100% 51% no-repeat,
                radial-gradient(1.3em .34em at 50% calc(100% + .12em), #0000 97%, #000 100%) bottom / 100% 51% no-repeat;
          mask: radial-gradient(1.3em .34em at 50% -.12em, #0000 97%, #000 100%) top / 100% 51% no-repeat,
                radial-gradient(1.3em .34em at 50% calc(100% + .12em), #0000 97%, #000 100%) bottom / 100% 51% no-repeat;
}
.title span {
  display: inline-block; position: relative;
  text-shadow: 0 .04em 0 rgba(255, 225, 190, .4);
  animation: wave 2.6s ease-in-out infinite;
}
.title span:first-child { font-size: 1.12em; line-height: .9; }
/* a Fredoka betűtípusban nincs „ő”, ezért a kettős ékezetet mi rajzoljuk az „o” fölé */
.title .odbl::before, .title .odbl::after {
  content: ""; position: absolute; top: .06em; width: .085em; height: .22em; border-radius: .05em;
  background: currentColor; transform: rotate(28deg);
}
.title .odbl::before { left: .2em; }
.title .odbl::after { left: .38em; }
.title span:nth-child(2) { animation-delay: .1s; } .title span:nth-child(3) { animation-delay: .2s; }
.title span:nth-child(4) { animation-delay: .3s; } .title span:nth-child(5) { animation-delay: .4s; }
.title span:nth-child(6) { animation-delay: .5s; } .title span:nth-child(7) { animation-delay: .6s; }
.title span:nth-child(8) { animation-delay: .7s; } .title span:nth-child(9) { animation-delay: .8s; }
@keyframes wave { 0%, 60%, 100% { transform: translateY(0) rotate(0); } 20% { transform: translateY(-.08em) rotate(-4deg); } 40% { transform: translateY(.01em) rotate(2deg); } }
.tagline {
  display: inline-block; margin-top: 12px; padding: .35em 1em; border-radius: 99px; font-size: 1.05rem;
  background: rgba(30, 10, 30, .38); color: #fff6e6; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.tagline em { color: #ffd96b; }

/* üveghatású panel */
body:not([data-screen="game"]) .card-panel {
  background: rgba(255, 248, 236, .9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 18px 50px rgba(20, 5, 30, .35), inset 0 1px 0 rgba(255, 255, 255, .7);
  border: 1px solid rgba(255, 255, 255, .5);
}
#home .card-panel { animation: rise .7s cubic-bezier(.2, .9, .3, 1.2) both; }
@keyframes rise { from { transform: translateY(30px) scale(.96); opacity: 0; } }
#createBtn { background: linear-gradient(135deg, #6b2a3c, #4a1a2a); box-shadow: 0 4px 0 #2c0e18, 0 8px 22px rgba(74, 26, 42, .35); }
.bot-btn { background: linear-gradient(135deg, #2f8f86, #21695f); color: #fff; box-shadow: 0 4px 0 #154a43, 0 8px 22px rgba(33, 105, 95, .35); }
.bot-btn:hover { filter: brightness(1.08); }
#home .or span { background: #fcf4e8; }

/* rét a futó szakikkal */
.meadow { position: relative; width: 100vw; height: 150px; margin-top: auto; z-index: 1; pointer-events: none; flex: none; overflow-x: hidden; overflow-x: clip; overflow-y: visible; }
.meadow::before {
  content: ""; position: absolute; left: -5%; right: -5%; bottom: -6px; height: 66px; border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  background: linear-gradient(180deg, #4f9b54, #2a6a35);
  box-shadow: inset 0 6px 0 rgba(255, 255, 255, .12);
}
.runner { position: absolute; bottom: 30px; width: clamp(54px, 13vw, 78px); animation: run-r 14s linear infinite; }
.runner img { width: 100%; display: block; transform-origin: 50% 100%; animation: runner-hop 4s ease-in-out infinite; }
.runner.left { animation-name: run-l; }
.runner.left img { animation-name: runner-hop-l; }
@keyframes run-r { from { left: -20%; } to { left: 110%; } }
@keyframes run-l { from { left: 110%; } to { left: -20%; } }
@keyframes runner-hop { 0%, 70%, 100% { transform: rotate(6deg); } 80% { transform: translateY(-34px) rotate(-8deg); } 90% { transform: rotate(8deg); } }
@keyframes runner-hop-l { 0%, 70%, 100% { transform: scaleX(-1) rotate(6deg); } 80% { transform: scaleX(-1) translateY(-34px) rotate(-8deg); } 90% { transform: scaleX(-1) rotate(8deg); } }

/* lábléc: tulajdonos és logó */
#home, #lobby { padding-bottom: 0; }
.site-foot {
  width: 100vw; display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; flex: none;
  padding: 10px 16px max(12px, env(safe-area-inset-bottom));
  background: #1f4d29; color: #e9f3e4; font-family: "Baloo 2", sans-serif; font-size: .9rem;
  position: relative; z-index: 2; text-align: center;
}
.site-foot img { height: 30px; width: auto; }

#lobby .topbar { color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, .45); }
#lobby .lobby-grid { position: relative; z-index: 2; }

@media (prefers-reduced-motion: reduce) {
  .title span, .runner, .runner img, .ds-cloud { animation: none; }
}

/* frissen beszúrt lap: azonnal a helyére kerül, nem csúszik be a sor elejéről */
.hand .card.fresh { transition: none !important; }

/* zene be/ki gombok */
.music-toggle.off { opacity: .45; text-decoration: line-through; }
.music-fab {
  position: absolute; left: 14px; top: calc(env(safe-area-inset-top) + 10px); z-index: 5;
  width: 42px; height: 42px; border-radius: 50%; border: 0; cursor: pointer; font-size: 1.2rem;
  background: rgba(0, 0, 0, .22); color: #fff; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .2); transition: transform .15s, background .2s;
}
.music-fab:hover { transform: scale(1.08); background: rgba(0, 0, 0, .32); }
.music-fab.off { text-decoration: none; }
.music-fab.off::after { content: ""; position: absolute; left: 9px; right: 9px; top: 50%; height: 2px; background: #fff; transform: rotate(-35deg); }
#lobby .topbar-actions { display: flex; gap: 4px; }