/* Layout: five one-screen views — kullanıcı adı, ana sayfa, oyun (board + keyboard), istatistikler, sıralama.
   Two skins (data-skin on <html>): kagit = clean puzzle-paper (light), komur = charcoal (dark); toggled by the header button.
   Tiles keep the game's meaning in every skin: green = right place, yellow = wrong place. */
:root{
  --hit:#3f9b52; --near:#e2b33a; --on-hit:#ffffff; --on-near:#ffffff;
  --head:"Rubik", "Segoe UI", system-ui, sans-serif;
  --body:"Figtree", "Segoe UI", system-ui, sans-serif;
  /* kağıt (default) */
  --bg:#f3f3f0; --panel:#ffffff; --line:#d6d7d9; --ink:#121212; --muted:#6a6d72;
  --accent:#121212; --on-accent:#ffffff;
  --key:#dfe1e4; --key-ink:#121212;
  --empty:#ffffff; --empty-line:#d6d7d9; --filled:#ffffff; --filled-line:#8a8d92; --filled-ink:#121212;
  --miss:#7c7f85; --miss-ink:#ffffff;
  --card:#ffffff; --card-ink:#121212; --card-muted:#6a6d72; --card-line:#e4e5e7;
  --heart:#e2483d;
  color-scheme:light;
}
:root[data-skin="komur"]{
  --hit:#538d4e; --near:#b59f3b;
  --bg:#121213; --panel:#1c1c1e; --line:#3a3a3c; --ink:#f2f2f2; --muted:#9a9a9f;
  --accent:#f2f2f2; --on-accent:#121213;
  --key:#818384; --key-ink:#ffffff;
  --empty:#121213; --empty-line:#3a3a3c; --filled:#121213; --filled-line:#6e6e72; --filled-ink:#ffffff;
  --miss:#3a3a3c; --miss-ink:#ffffff;
  --card:#1c1c1e; --card-ink:#f2f2f2; --card-muted:#9a9a9f; --card-line:#333336;
  --heart:#e2483d;
  color-scheme:dark;
}
[hidden]{display:none!important}
html,body{height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:15px;overflow:hidden;-webkit-tap-highlight-color:transparent;transition:background .2s}
.app{height:100%;max-width:520px;margin:0 auto;padding-inline:16px;padding-block:8px 12px;
  display:flex;flex-direction:column;gap:10px;box-sizing:border-box}

.theme-btn{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--panel);color:var(--ink);
  display:grid;place-items:center;cursor:pointer;padding:0;flex:none}
.theme-btn svg{width:20px;height:20px;display:block}
.theme-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.head-right{display:flex;align-items:center;gap:12px}

header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{font-family:var(--head);font-weight:800;font-size:1.4rem;line-height:1;letter-spacing:-.01em;color:var(--ink)}
.brand span{display:block;font-weight:500;font-size:.95rem;letter-spacing:.02em;color:var(--muted);margin-top:3px}
.lvl{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.lvl b{font-family:var(--head);font-weight:700;font-size:1.15rem;font-variant-numeric:tabular-nums}
.lvl small{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600}


.board-wrap{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;position:relative}
.board{display:grid;gap:6px;width:100%}
.row{display:grid;gap:6px}
.tile{aspect-ratio:1;max-width:100%;border:2px solid var(--empty-line);border-radius:4px;background:var(--empty);
  display:grid;place-items:center;font-family:var(--head);font-weight:700;font-size:clamp(1.3rem,6.5vw,2rem);
  color:var(--filled-ink);user-select:none;box-sizing:border-box}
.tile.filled{background:var(--filled);border-color:var(--filled-line);animation:pop .12s ease-out}
.tile.hit,.tile.near,.tile.miss{border-color:transparent}
.tile.hit{background:var(--hit);color:var(--on-hit)}
.tile.near{background:var(--near);color:var(--on-near)}
.tile.miss{background:var(--miss);color:var(--miss-ink)}
.tile.flip{animation:flip .45s ease both}
.row.shake{animation:shake .4s}
.row.win .tile{animation:hop .5s ease both}
@keyframes pop{50%{transform:scale(1.08)}}
@keyframes flip{0%{transform:rotateX(0)}50%{transform:rotateX(90deg)}100%{transform:rotateX(0)}}
@keyframes shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
@keyframes hop{40%{transform:translateY(-12px)}}
@media (prefers-reduced-motion: reduce){.tile,.row{animation:none!important}}

.toast{position:fixed;top:calc(env(safe-area-inset-top,0px) + 70px);left:50%;transform:translateX(-50%);background:var(--accent);color:var(--on-accent);
  padding:8px 14px;border-radius:6px;font-weight:600;font-size:.9rem;white-space:nowrap;z-index:5}

.kb{display:flex;flex-direction:column;gap:6px;user-select:none}
.kr{display:flex;gap:4px;justify-content:center}
.key{flex:1;min-width:0;height:54px;border:0;border-radius:5px;background:var(--key);color:var(--key-ink);
  font-family:var(--head);font-weight:600;font-size:1.05rem;cursor:pointer;padding:0;touch-action:manipulation}
.key.wide{flex:1.6;font-size:.75rem;letter-spacing:.05em}
.key:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.key:active{filter:brightness(.9)}
.key.hit{background:var(--hit);color:var(--on-hit)}
.key.near{background:var(--near);color:var(--on-near)}
.key.miss{background:var(--miss);color:var(--miss-ink)}

.sheet{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:flex-end;justify-content:center;z-index:10;padding-inline:16px}
.card{background:var(--card);color:var(--card-ink);width:100%;max-width:480px;border-radius:16px 16px 0 0;
  padding-block:22px calc(22px + env(safe-area-inset-bottom,0px));padding-inline:22px;box-shadow:0 -10px 40px rgba(0,0,0,.25);
  display:flex;flex-direction:column;gap:14px;animation:rise .25s ease-out}
@keyframes rise{from{transform:translateY(30px);opacity:.4}}
.card .eyebrow{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--card-muted);font-weight:700}
.card h2{margin:0;font-family:var(--head);font-weight:800;font-size:2.3rem;letter-spacing:.04em;line-height:1}
.card h2.lost{color:var(--card-muted)}
.def{margin:0;padding-left:12px;border-left:3px solid var(--hit);line-height:1.5;font-size:.98rem}
.def em{display:block;font-style:normal;font-size:.72rem;color:var(--card-muted);letter-spacing:.08em;text-transform:uppercase;margin-bottom:2px;font-weight:600}
.stats{display:flex;gap:18px;font-size:.85rem;color:var(--card-muted);padding-top:12px;border-top:1px solid var(--card-line)}
.stats b{display:block;font-family:var(--head);font-weight:700;font-size:1.35rem;color:var(--card-ink);font-variant-numeric:tabular-nums}
.btn{border:0;border-radius:10px;padding:14px;font-family:var(--head);font-weight:600;font-size:1rem;cursor:pointer;
  background:var(--accent);color:var(--on-accent)}
.btn:focus-visible{outline:2px solid var(--hit);outline-offset:2px}
.btn:disabled{background:var(--card-line);color:var(--card-muted);cursor:default}

.status{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 12px;border-radius:10px;background:var(--panel)}
.lives{display:flex;align-items:center;gap:4px}
.heart{width:18px;height:16px;display:block}
.heart path{fill:var(--heart)}
.heart.empty path{fill:none;stroke:var(--line);stroke-width:2}
.regen{font-size:.78rem;color:var(--muted);margin-left:6px;font-variant-numeric:tabular-nums}
.week{text-align:right;line-height:1.1}
.week b{font-family:var(--head);font-weight:700;font-size:1.2rem;font-variant-numeric:tabular-nums}
.week small{display:block;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600}
.stake{text-align:center;font-size:.85rem;color:var(--muted);min-height:1.2em}
.stake b{color:var(--ink);font-variant-numeric:tabular-nums}
.gain{font-family:var(--head);font-weight:700;font-size:1.05rem;color:var(--hit)}
.gain.loss{color:var(--card-muted)}
.wait{font-family:var(--head);font-weight:700;font-size:2.4rem;font-variant-numeric:tabular-nums;line-height:1}
@media (max-height:660px){.key{height:44px}}

/* ── API sürümü eklemeleri ── */
.icon-btn{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--panel);color:var(--ink);
  display:grid;place-items:center;cursor:pointer;padding:0;flex:none}
.icon-btn svg{width:20px;height:20px;display:block}
.icon-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.loading{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);font-weight:600;font-size:.9rem}
.card .close{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:50%;border:0;background:transparent;
  color:var(--card-muted);font-size:1.4rem;cursor:pointer;line-height:1}
.card{position:relative;max-height:85%;overflow:auto}
.lb-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-right:36px}
.lb-head h3{margin:0;font-family:var(--head);font-weight:800;font-size:1.3rem;text-wrap:balance}
.lb-head span{white-space:nowrap;font-size:.78rem;color:var(--card-muted);font-variant-numeric:tabular-nums}
.lb{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.lb li{display:grid;grid-template-columns:2.2em 1fr auto;align-items:center;gap:10px;padding:10px 4px;border-bottom:1px solid var(--card-line);font-variant-numeric:tabular-nums}
.lb li .r{font-family:var(--head);font-weight:700;color:var(--card-muted);text-align:center}
.lb li .n{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.lb li .p{font-family:var(--head);font-weight:700}
.lb li.top .r{color:var(--card-ink)}
.lb li.me{background:color-mix(in srgb,var(--hit) 14%,transparent);border-radius:8px;border-bottom-color:transparent}
.lb .gap{display:block;text-align:center;color:var(--card-muted);padding:4px;border:0}
.lb-empty{color:var(--card-muted);margin:0}
.name-row{display:flex;gap:8px}
.name-row input{flex:1;min-width:0;border:1px solid var(--card-line);background:transparent;color:var(--card-ink);border-radius:10px;
  padding:12px;font:500 1rem var(--body)}
.name-row input:focus{outline:2px solid var(--hit);outline-offset:1px}
.name-row .btn{padding:12px 16px}
.hint{font-size:.8rem;color:var(--card-muted);margin:0}

/* ── Ekranlar ── */
.screen{height:100%}
.app.scroll{overflow-y:auto;gap:14px;padding-block:8px 28px}
.app.center{justify-content:center;gap:28px}
.lvl.mid{align-items:center;flex:1}
.screen-title{margin:0;flex:1;text-align:center;font-family:var(--head);font-weight:700;font-size:1.15rem}
.icon-btn.back svg{width:22px;height:22px}

/* kullanıcı adı */
.name-hero{text-align:center;display:flex;flex-direction:column;gap:10px;align-items:center}
.brand.big{font-size:2.6rem}
.lead{margin:0;color:var(--muted);font-size:1rem;max-width:30ch;line-height:1.45;text-wrap:balance}
.name-card{display:flex;flex-direction:column;gap:10px;background:var(--panel);border-radius:16px;padding:20px}
.name-card label{font-weight:700;font-family:var(--head)}
.name-card input,.name-row input{border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:10px;padding:14px;font:500 1.05rem var(--body);min-width:0}
.name-card input:focus,.name-row input:focus{outline:2px solid var(--hit);outline-offset:1px}
.form-err{margin:0;color:#c0392b;font-weight:600;font-size:.9rem}
:root[data-skin="komur"] .form-err{color:#ff7b6b}
.big-btn{padding:16px;font-size:1.05rem}

/* ana sayfa */
.hello{font-family:var(--head);font-size:1.5rem;font-weight:500;margin-top:6px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hello span{color:var(--muted)}
.hello b{font-weight:800}
.home-card{background:var(--panel);border-radius:16px;padding:18px;display:flex;flex-direction:column;gap:16px}
.home-level{display:flex;flex-direction:column;gap:2px}
.home-level small{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700}
.home-level b{font-family:var(--head);font-weight:800;font-size:2.2rem;line-height:1.05}
.home-level span{color:var(--muted);font-weight:600}
.home-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.play-btn{padding:20px;font-size:1.3rem;border-radius:14px;margin-top:6px}
.play-note{margin:-2px 0 0;text-align:center;color:var(--muted);font-size:.88rem;min-height:1.2em;font-variant-numeric:tabular-nums}
.home-links{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:auto}
.tile-btn{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:16px;border-radius:14px;border:1px solid var(--line);
  background:var(--panel);color:var(--ink);font:700 1rem var(--head);cursor:pointer;text-align:left}
.tile-btn svg{width:26px;height:26px}
.tile-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tile-btn:active{filter:brightness(.95)}

/* sekmeler */
.tabs{display:flex;gap:4px;background:var(--panel);padding:4px;border-radius:12px}
.tabs button{flex:1;border:0;background:transparent;color:var(--muted);font:600 .9rem var(--body);padding:10px 4px;border-radius:9px;cursor:pointer}
.tabs button[aria-selected="true"]{background:var(--accent);color:var(--on-accent)}
.tabs button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* istatistikler */
.me-card{background:var(--panel);border-radius:14px;padding:14px 16px;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.me-card div{display:flex;flex-direction:column;gap:2px;min-width:0}
.me-card b{font-family:var(--head);font-weight:800;font-size:1.3rem;font-variant-numeric:tabular-nums}
.me-card small{font-size:.72rem;color:var(--muted);font-weight:600}
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.stat{background:var(--panel);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:4px;min-width:0}
.stat b{font-family:var(--head);font-weight:800;font-size:1.5rem;font-variant-numeric:tabular-nums;line-height:1.1}
.stat small{font-size:.75rem;color:var(--muted);font-weight:600}
.sub{margin:6px 0 0;font-family:var(--head);font-size:1rem;font-weight:700}
.dist{display:flex;flex-direction:column;gap:6px}
.dist-row{display:grid;grid-template-columns:1.4em 1fr;align-items:center;gap:8px;font-variant-numeric:tabular-nums}
.dist-row > span{font-weight:700;color:var(--muted);text-align:center}
.dist-bar{background:var(--miss);color:var(--miss-ink);border-radius:4px;padding:4px 8px;font-weight:700;font-size:.85rem;text-align:right;min-width:2em;box-sizing:border-box}
.dist-bar.top{background:var(--hit);color:var(--on-hit)}
.rename{background:var(--panel);border-radius:12px;padding:12px 14px}
.rename summary{cursor:pointer;font-weight:600}
.rename form{margin-top:10px}

/* sıralama */
#boardMe{grid-template-columns:auto 1fr auto;align-items:center;gap:14px}
#boardMe .rank{font-family:var(--head);font-weight:800;font-size:1.6rem;font-variant-numeric:tabular-nums}
#boardMe .nm{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#boardMe .pt{font-family:var(--head);font-weight:800;font-size:1.3rem;text-align:right}
#lbList li .n small{color:var(--muted);font-weight:500;margin-left:6px}
.sheet-actions{display:grid;grid-template-columns:1fr 1.6fr;gap:8px}
.btn.ghost{background:transparent;color:var(--card-ink);border:1px solid var(--card-line)}

/* nasıl oynanır */
.howto{gap:10px}
.howto p{margin:0;line-height:1.5}
.howto-title{text-align:right}
.howto-lead{font-size:1.05rem}
.howto hr{border:0;border-top:1px solid var(--line);margin:8px 0;width:100%}
.howto .sub{margin-top:14px}
.ex-row{display:flex;gap:5px;margin-top:6px}
.ex-tile{width:46px;height:46px;display:grid;place-items:center;border:2px solid var(--filled-line);background:var(--filled);color:var(--filled-ink);
  font-family:var(--head);font-weight:700;font-size:1.45rem;border-radius:4px;box-sizing:border-box}
.ex-tile.hit{background:var(--hit);border-color:transparent;color:var(--on-hit)}
.ex-tile.near{background:var(--near);border-color:transparent;color:var(--on-near)}
.ex-tile.miss{background:var(--miss);border-color:transparent;color:var(--miss-ink)}
.pts-row{display:grid;grid-template-columns:repeat(6,1fr);gap:5px}
.pts-row div{background:var(--panel);border-radius:8px;padding:8px 0;display:flex;flex-direction:column;align-items:center;gap:2px}
.pts-row small{color:var(--muted);font-weight:600;font-size:.72rem}
.pts-row b{font-family:var(--head);font-weight:800;font-size:1.25rem;font-variant-numeric:tabular-nums}
.pts-row div:first-child{background:var(--hit);color:var(--on-hit)}
.pts-row div:first-child small{color:var(--on-hit)}
.feature-list{display:flex;flex-direction:column;gap:8px}
.feature{display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:start;background:var(--panel);border-radius:12px;padding:14px}
.feature svg{width:24px;height:24px;margin-top:2px}
.feature b{display:block;font-family:var(--head);margin-bottom:2px}
.feature span{color:var(--muted);line-height:1.45;font-size:.92rem}
.howto .big-btn{margin-top:14px}