:root{
  --ground:#DDF3EA;
  --ink:#17324D;
  --muted:#52708A;
  --card-back:#17324D;
  --paper:#FFFFFF;
  --line:rgba(23,50,77,.12);
  --p0:#3D6BF2;
  --p0-dark:#2A4FC0;
  --p0-soft:#E3EAFE;
  --p1:#FF7A2F;
  --p1-dark:#D65A14;
  --p1-soft:#FFEADF;
  --star:#FFC93C;
  --font:"Fredoka", "Segoe UI Rounded", "Segoe UI", system-ui, sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{background:var(--ground)}
body{
  margin:0;color:var(--ink);font:16px/1.4 var(--font);
  background-color:var(--ground);
  background-image:conic-gradient(rgba(23,50,77,.035) 25%, transparent 0 50%, rgba(23,50,77,.035) 0 75%, transparent 0);
  background-size:48px 48px;
  padding-inline:16px;padding-block:10px 12px;
  -webkit-tap-highlight-color:transparent;
}
.app{max-width:1280px;margin-inline:auto;height:calc(100vh - 22px);height:calc(100dvh - 22px);min-height:520px;display:grid;grid-template-rows:auto 1fr auto;gap:10px}

/* üst çubuk */
.bar{display:flex;align-items:center;justify-content:space-between;gap:12px}
.back{color:var(--muted);text-decoration:none;font-weight:500;font-size:15px}
.back:hover{color:var(--ink)}
.title{margin:0;font-weight:700;font-size:clamp(1.3rem,3.5vw,1.9rem);letter-spacing:.01em}
.bar-actions{display:flex;gap:8px;align-items:center}
.icon-btn{width:42px;height:42px;border-radius:12px;border:0;background:var(--paper);color:var(--ink);display:grid;place-items:center;cursor:pointer;padding:0;box-shadow:0 3px 0 var(--line)}
.icon-btn span{display:grid;place-items:center}
.icon-btn span[hidden]{display:none}
.icon-btn svg{width:22px;height:22px}

button{font:inherit;cursor:pointer}
.btn{border:0;border-radius:14px;background:var(--paper);color:var(--ink);font-weight:600;padding:12px 20px;box-shadow:0 4px 0 var(--line);transition:transform .06s, box-shadow .06s}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--line)}
.btn.small{padding:9px 14px;font-size:15px}
.btn.primary{background:var(--ink);color:#fff;box-shadow:0 4px 0 #0B1B2B}
.btn.primary:active{box-shadow:0 1px 0 #0B1B2B}
.btn.big{font-size:1.25rem;padding:14px 20px;width:100%}
:focus-visible{outline:3px solid var(--p0);outline-offset:3px}

/* masa düzeni */
.table{min-height:0;display:grid;grid-template-columns:200px 1fr 200px;grid-template-areas:"p0 board p1";gap:16px;align-items:center}
#p0{grid-area:p0}
#p1{grid-area:p1}
.board-wrap{grid-area:board;min-height:0;height:100%;display:grid;place-items:center;overflow:hidden}

.player{
  --c:var(--p0);--c-dark:var(--p0-dark);--c-soft:var(--p0-soft);
  background:var(--paper);border-radius:22px;padding:18px 16px;display:grid;justify-items:center;gap:10px;text-align:center;
  border:4px solid transparent;box-shadow:0 6px 0 var(--line);transition:transform .2s, border-color .2s, box-shadow .2s, opacity .2s;opacity:.7;
}
.player[data-p="1"]{--c:var(--p1);--c-dark:var(--p1-dark);--c-soft:var(--p1-soft)}
.player.active{border-color:var(--c);box-shadow:0 8px 0 var(--c-dark);transform:translateY(-4px);opacity:1}
.avatar{width:72px;height:72px;border-radius:50%;background:var(--c-soft, var(--p0-soft));display:grid;place-items:center;font-size:40px;line-height:1}
.player-row.p0 .avatar{background:var(--p0-soft)}
.player-row.p1 .avatar{background:var(--p1-soft)}
.avatar.sm{width:44px;height:44px;font-size:24px;flex:none}
.p-info{display:grid;gap:4px;justify-items:center}
.p-name{font-weight:700;font-size:1.4rem;line-height:1.1;overflow-wrap:anywhere}
.p-turn{font-size:13px;font-weight:600;color:#fff;background:var(--c);padding:2px 10px;border-radius:999px;visibility:hidden}
.player.active .p-turn{visibility:visible}
.p-score{display:flex;align-items:baseline;gap:6px}
.p-score b{font-size:2.6rem;line-height:1;color:var(--c);font-variant-numeric:tabular-nums}
.p-score span{color:var(--muted)}
.hint{border:2px solid var(--c);background:var(--c-soft);color:var(--ink);border-radius:999px;padding:6px 14px;font-weight:600}
.hint span{display:inline-grid;place-items:center;min-width:1.5em;height:1.5em;border-radius:50%;background:var(--c);color:#fff;font-size:13px;margin-left:4px}
.hint:disabled{opacity:.4;cursor:default}
.hint[hidden]{display:none}

.status{margin:0;text-align:center;font-weight:500;font-size:1.1rem;min-height:1.5em}
.status b{font-weight:700}

/* kartlar */
.board{display:grid;grid-template-columns:repeat(var(--cols,4), var(--cw,100px));gap:var(--gap,12px);justify-content:center;align-content:center}
.card{
  width:var(--cw,100px);height:calc(var(--cw,100px) * 1.25);padding:0;border:0;background:none;perspective:900px;
  touch-action:manipulation;
}
.card .inner{position:relative;display:block;width:100%;height:100%;transform-style:preserve-3d;transition:transform .35s cubic-bezier(.3,.7,.4,1.2)}
.card.open .inner{transform:rotateY(180deg)}
.face{position:absolute;inset:0;border-radius:calc(var(--cw,100px) * .14);backface-visibility:hidden;-webkit-backface-visibility:hidden;display:grid;place-items:center}
.face-back{
  background-color:var(--card-back);
  background-image:radial-gradient(circle, rgba(255,255,255,.14) 18%, transparent 20%), radial-gradient(circle, rgba(255,255,255,.14) 18%, transparent 20%);
  background-size:18px 18px;background-position:0 0, 9px 9px;
  box-shadow:inset 0 0 0 5px var(--card-back), inset 0 0 0 7px rgba(255,255,255,.25), 0 5px 0 #0B1B2B;
}
.face-front{background:var(--paper);transform:rotateY(180deg);box-shadow:0 5px 0 var(--line), inset 0 0 0 3px var(--line)}
.emoji{font-size:calc(var(--cw,100px) * .58);line-height:1;font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif}
.card:hover:not(.open) .face-back{filter:brightness(1.25)}
.card.matched .face-front{box-shadow:0 5px 0 var(--by-dark, var(--line)), inset 0 0 0 5px var(--by, var(--line));background:var(--by-soft, #fff)}
.card.matched{cursor:default}
.card.pop .inner{animation:pop .45s ease}
.card.peek .face-front{box-shadow:0 5px 0 #D9A400, inset 0 0 0 5px var(--star)}
.badge{position:absolute;top:-8px;right:-8px;width:calc(var(--cw,100px) * .3);height:calc(var(--cw,100px) * .3);min-width:22px;min-height:22px;border-radius:50%;background:var(--by, #fff);display:none;place-items:center;font-size:calc(var(--cw,100px) * .17);transform:rotateY(180deg);backface-visibility:hidden;box-shadow:0 2px 0 rgba(0,0,0,.15)}
.card.matched .badge{display:grid}
@keyframes pop{0%{transform:rotateY(180deg) scale(1)}40%{transform:rotateY(180deg) scale(1.12)}100%{transform:rotateY(180deg) scale(1)}}
.card.shake .inner{animation:shake .4s ease}
@keyframes shake{0%,100%{transform:rotateY(180deg) translateX(0)}25%{transform:rotateY(180deg) translateX(-6px)}75%{transform:rotateY(180deg) translateX(6px)}}

/* açılır pencereler */
.overlay{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding-inline:16px;padding-block:16px;background:rgba(23,50,77,.45);overflow-y:auto}
.overlay[hidden]{display:none}
.sheet{width:100%;max-width:560px;background:var(--paper);border-radius:26px;padding:22px 22px 24px;display:grid;gap:16px;box-shadow:0 20px 50px rgba(23,50,77,.3)}
.sheet h2{margin:0;font-size:1.6rem;font-weight:700;text-align:center}
fieldset{border:0;margin:0;padding:0;display:grid;gap:8px;min-width:0}
legend{font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:0;margin-bottom:8px}
.choices{display:grid;gap:10px}
.choices.two{grid-template-columns:1fr 1fr}
.choices.three{grid-template-columns:repeat(3,1fr)}
.choice{position:relative;cursor:pointer}
.choice input{position:absolute;opacity:0;pointer-events:none}
.choice-body{display:grid;gap:2px;height:100%;padding:12px 14px;border-radius:16px;border:3px solid var(--line);background:#F6FBF9;transition:border-color .15s, background .15s}
.choice-body b{font-size:1.15rem}
.choice-body small{color:var(--muted);font-size:13px;line-height:1.35}
.choice input:checked + .choice-body{border-color:var(--ink);background:#fff;box-shadow:0 4px 0 var(--ink)}
.choice input:focus-visible + .choice-body{outline:3px solid var(--p0);outline-offset:2px}
.player-rows{display:grid;gap:10px}
.player-row{display:flex;align-items:center;gap:10px}
.player-row input[type="text"]{flex:1;min-width:0;font:600 1.1rem var(--font);color:var(--ink);padding:10px 12px;border-radius:12px;border:3px solid var(--line);background:#F6FBF9}
.player-row.p0 input[type="text"]:focus{border-color:var(--p0);outline:none}
.player-row.p1 input[type="text"]:focus{border-color:var(--p1);outline:none}
.toggle{display:flex;align-items:center;gap:6px;font-weight:500;cursor:pointer;white-space:nowrap}
.toggle input{width:22px;height:22px;accent-color:var(--ink)}
.note{margin:0;font-size:13px;color:var(--muted)}

.result{text-align:center;justify-items:center}
.res-title{margin:0;font-size:clamp(1.8rem,6vw,2.4rem);font-weight:700;line-height:1.1;text-wrap:balance}
.res-stars{display:flex;gap:8px}
.res-stars[hidden]{display:none}
.res-stars svg{width:54px;height:54px}
.res-sub{margin:0;color:var(--muted)}
.res-players{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.res-player{display:flex;align-items:center;gap:10px;padding:8px 14px 8px 8px;border-radius:999px;background:var(--c-soft)}
.res-player b{font-size:1.4rem;color:var(--c-dark)}
.res-best{margin:0;font-weight:600;color:var(--p1-dark);min-height:1.2em}
.row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}

#confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:30}
#confetti i{position:absolute;top:-20px;width:10px;height:6px;border-radius:2px;animation:fall linear forwards}
@keyframes fall{to{transform:translate(var(--dx), 110vh) rotate(var(--r))}}

/* dar ve dikey ekranlar */
@media (max-width:820px), (orientation:portrait){
  .table{grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr;grid-template-areas:"p0 p1" "board board";gap:10px;align-items:stretch}
  .player{grid-template-columns:auto 1fr auto;justify-items:start;text-align:left;padding:10px 12px;gap:4px 10px;border-radius:18px}
  .player .avatar{width:44px;height:44px;font-size:24px;grid-row:span 2}
  .p-info{justify-items:start}
  .p-name{font-size:1.1rem}
  .p-turn{font-size:11px;padding:1px 8px}
  .p-score{grid-row:span 2}
  .p-score b{font-size:1.9rem}
  .p-score span{display:none}
  .hint{grid-column:1 / -1;justify-self:stretch;padding:4px 10px;font-size:14px}
  .player.active{transform:none}
  .choices.two{grid-template-columns:1fr}
}
@media (max-width:420px){
  .title{display:none}
  .choices.three .choice-body{padding:10px 8px}
}
@media (prefers-reduced-motion:reduce){
  .card .inner{transition:none}
  .card.pop .inner,.card.shake .inner{animation:none}
  .player,.btn{transition:none}
}