/* guess.greyce.net — розовый необрутализм экопространства (как MANDOM) */
:root{
  --bg:#08070a; --card:#131015; --card2:#1b161e; --text:#f7e8f0; --muted:#a88a9a;
  --pink:#ff3d8b; --pink-soft:#ff8fc0; --wine:#5e0b32;
  --hit:#3ddc84; --hit-ink:#04180c;
  --near:#ffc83d; --near-ink:#221600;
  --miss:#2a2430; --miss-ink:#cdbfc7;
  --b:3px solid var(--pink); --sh:7px 7px 0 var(--wine); --sh-s:4px 4px 0 var(--wine);
  --r:14px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;color:var(--text);font:400 16px/1.45 Onest,system-ui,sans-serif;
  background:radial-gradient(rgba(255,61,139,.16) 1px,transparent 1.5px) 0 0/22px 22px,var(--bg)}
button{font:inherit;color:inherit;cursor:pointer}
a{color:var(--pink-soft)}

.top{max-width:920px;margin:0 auto;padding:18px 16px 8px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px 18px}
.tabs{grid-column:1/-1;grid-row:2}
.logo{margin:0;font:900 clamp(24px,6.4vw,40px)/1 Unbounded,system-ui,sans-serif;color:var(--pink);letter-spacing:-.02em;
  text-shadow:3px 3px 0 var(--wine);text-transform:uppercase}
.tabs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px 6px 6px 2px;margin:-2px -6px -6px -2px}
.tab{flex:0 0 auto;border:var(--b);border-radius:999px;background:transparent;padding:6px 14px;font-weight:800;font-size:15px}
.tab.on{background:var(--pink);color:var(--bg);box-shadow:var(--sh-s)}
.tab:disabled{opacity:.45;cursor:default;border-style:dashed}
.tab i{font-style:normal;font-weight:400;font-size:12px;color:var(--muted)}
.tools{display:flex;gap:8px}
.tool{width:42px;height:42px;border:var(--b);border-radius:12px;background:var(--card);font-weight:800;font-size:19px;display:grid;place-items:center;box-shadow:var(--sh-s);transition:transform .08s}
.tool:hover{transform:translate(-1px,-1px)} .tool:active{transform:translate(3px,3px);box-shadow:none}
.tool svg{width:22px;height:22px;fill:none;stroke:var(--pink);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.tool svg circle{fill:var(--pink)}
#accBtn svg circle{fill:none}
.tool.on{background:var(--pink)} .tool.on svg{stroke:var(--bg)}

main{max-width:920px;margin:0 auto;padding:0 16px}
.bar{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:8px 2px 12px;color:var(--muted);font-weight:600}
.mode{font:600 15px/1.2 Unbounded,system-ui,sans-serif;color:var(--text)}
.mode b{color:var(--pink)}
.left span{color:var(--text);font-weight:800}

.ask{background:var(--card);border:var(--b);border-radius:var(--r);box-shadow:var(--sh);padding:14px;margin-bottom:22px}
.search{position:relative}
#q{width:100%;border:3px solid var(--bg);outline:none;border-radius:12px;background:var(--text);color:var(--bg);
  font:600 17px/1.2 Onest,system-ui,sans-serif;padding:13px 14px}
#q:focus{border-color:var(--pink-soft)}
#q::placeholder{color:#8d7684}
#sugg{position:absolute;z-index:5;left:0;right:0;top:calc(100% + 6px);margin:0;padding:6px;list-style:none;background:var(--card2);
  border:var(--b);border-radius:12px;box-shadow:var(--sh);max-height:min(60vh,430px);overflow:auto}
#sugg li{padding:9px 10px;border-radius:8px;cursor:pointer;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px}
#sugg li.sel,#sugg li:hover{background:var(--pink);color:var(--bg)}
#sugg li b{font-weight:800}
#sugg li span{font-weight:600;color:var(--pink-soft)}
#sugg li small{flex-basis:100%;color:var(--muted);font-size:13px}
#sugg li.sel span,#sugg li.sel small,#sugg li:hover span,#sugg li:hover small{color:var(--bg)}
#sugg li.none{cursor:default;color:var(--muted)} #sugg li.none:hover{background:none;color:var(--muted)}

/* подсказки: две ячейки, в открытой — три варианта на выбор */
.hints{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.hints:empty{display:none}
.hslot{border:2px dashed rgba(255,61,139,.5);border-radius:12px;padding:9px 12px 10px;display:flex;flex-direction:column;gap:4px;min-width:0}
.hslot b{font-weight:800}
.hslot span{font-size:13px;color:var(--muted)}
.hslot.locked{opacity:.6}
.hslot.pick{border-style:solid;border-color:var(--pink);background:rgba(255,61,139,.08)}
.hslot.open{border-style:solid;border-color:var(--pink-soft);background:var(--card2)}
.hopts{display:flex;flex-wrap:wrap;gap:7px;margin-top:3px}
.hopts button{border:2px solid var(--bg);border-radius:10px;background:var(--pink);color:var(--bg);font-weight:800;font-size:14px;padding:6px 10px;box-shadow:3px 3px 0 var(--wine);display:inline-flex;gap:6px;align-items:center}
.hopts button i{font-style:normal}
.hopts button:active{transform:translate(3px,3px);box-shadow:none}
.hv{font-size:15.5px;line-height:1.4;overflow-wrap:anywhere}
.hv .pw{overflow:hidden;border-radius:8px;width:110px;border:2px solid var(--bg);margin-top:2px}
.hv img{display:block;width:100%;filter:blur(9px) saturate(1.2);transform:scale(1.05)}
.giveup{display:block;margin:8px 0 -6px auto;border:0;background:none;color:var(--muted);text-decoration:underline;padding:4px 2px}

/* попытка */
.guess{background:var(--card);border:var(--b);border-radius:var(--r);box-shadow:var(--sh);padding:12px;margin-bottom:18px}
.guess.win{border-color:var(--hit);box-shadow:7px 7px 0 #0e5a33}
.gh{display:flex;align-items:baseline;gap:10px;margin:0 2px 10px}
.gh .n{font:900 15px/1 Unbounded,system-ui,sans-serif;color:var(--bg);background:var(--pink);border-radius:8px;padding:5px 7px;align-self:center}
.gh h3{margin:0;font:600 clamp(16px,4vw,19px)/1.25 Unbounded,system-ui,sans-serif}
.gh small{display:block;font:400 13px/1.3 Onest,system-ui,sans-serif;color:var(--muted);margin-top:2px}
.tiles{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.tile{position:relative;border:2px solid var(--bg);border-radius:10px;padding:7px 9px 8px;min-height:62px;display:flex;flex-direction:column;justify-content:flex-start;gap:2px;overflow:hidden}
.tile .l{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;opacity:.75}
.tile .v{font-weight:800;font-size:16px;line-height:1.2;overflow-wrap:anywhere}
.tile .v small{font-weight:600;font-size:12px;opacity:.8}
.tile .ar{position:absolute;right:7px;bottom:3px;font:900 24px/1 Unbounded,system-ui,sans-serif;opacity:.85}
.tile.hit{background:var(--hit);color:var(--hit-ink)}
.tile.near{background:var(--near);color:var(--near-ink)}
.tile.miss{background:var(--miss);color:var(--miss-ink);border-color:#3a3240}
.tile.na{background:transparent;color:var(--muted);border:2px dashed #4a3f50}
.tile.multi{background:var(--card2);color:var(--text);border-color:#3a3240}
.tile.multi.hit{border-color:var(--hit)} .tile.multi.near{border-color:var(--near)}
.t-dir,.t-std{grid-column:span 2}
.t-gen{grid-column:span 4}
.t-cast{grid-column:span 6}
.chips{list-style:none;margin:3px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.chips li{border-radius:999px;padding:3px 10px;font-weight:700;font-size:14px;background:var(--miss);color:var(--miss-ink);border:1.5px solid #3a3240}
.chips li.hit{background:var(--hit);color:var(--hit-ink);border-color:var(--hit)}
.chips li.near{background:var(--near);color:var(--near-ink);border-color:var(--near)}
.chips li.lead::before{content:"★ ";font-size:12px}

.tile.flip{animation:flip .5s cubic-bezier(.3,.7,.4,1) both}
@keyframes flip{from{transform:rotateX(90deg);opacity:.2}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.tile.flip{animation:none}}

/* итог */
.result{background:var(--card);border:3px solid var(--hit);border-radius:var(--r);box-shadow:7px 7px 0 #0e5a33;padding:16px;margin-bottom:22px;display:flex;gap:16px}
.result.lost{border-color:var(--pink);box-shadow:var(--sh)}
.result img{width:150px;align-self:flex-start;border-radius:10px;border:3px solid var(--bg)}
.result h2{margin:0 0 4px;font:900 clamp(20px,5vw,28px)/1.1 Unbounded,system-ui,sans-serif}
.result .sub{color:var(--muted);margin:0 0 8px}
.result .verdict{font:600 15px/1.3 Unbounded,system-ui,sans-serif;color:var(--hit);margin:0 0 10px}
.result.lost .verdict{color:var(--pink)}
.result .tg{font-style:italic;margin:0 0 12px}
.result .acts{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.btn{border:3px solid var(--bg);border-radius:12px;background:var(--pink);color:var(--bg);font-weight:800;padding:9px 14px;box-shadow:var(--sh-s)}
a.btn{display:inline-block;text-decoration:none}
dialog .acts{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 8px}
.btn.ghost{background:transparent;color:var(--text);border:2px solid var(--pink);box-shadow:none}
.btn:active{transform:translate(3px,3px);box-shadow:none}
.next{color:var(--muted);font-size:14px}
.next b{color:var(--text);font-variant-numeric:tabular-nums}

.empty{color:var(--muted);text-align:center;margin:28px 8px 40px}
.key{display:inline-flex;align-items:center;gap:6px;margin:6px 8px 0;white-space:nowrap}
.sw{display:inline-block;width:14px;height:14px;border-radius:4px;border:2px solid var(--bg)}
.sw.hit{background:var(--hit)} .sw.near{background:var(--near)} .sw.miss{background:var(--miss);border-color:#3a3240}

footer{max-width:920px;margin:30px auto 0;padding:18px 16px 30px;color:var(--muted);font-size:12.5px;display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap}
footer p{margin:0;flex:1 1 300px}
footer img{margin-top:2px}

dialog{max-width:min(560px,calc(100vw - 24px));width:100%;background:var(--card);color:var(--text);border:var(--b);border-radius:var(--r);box-shadow:var(--sh);padding:18px 20px 20px}
dialog::backdrop{background:rgba(8,7,10,.78)}
dialog h2{margin:0 0 10px;font:900 22px/1.1 Unbounded,system-ui,sans-serif;color:var(--pink)}
dialog h3{margin:18px 0 8px;font:600 14px/1.2 Unbounded,system-ui,sans-serif}
dialog .x{position:absolute;right:10px;top:8px;border:0;background:none;color:var(--muted);font-size:28px;line-height:1;padding:4px 8px}
.rl{padding-left:18px;margin:8px 0} .rl li{margin:5px 0}
.note{color:var(--muted);font-size:13.5px}
.nums{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;text-align:center}
.nums div{background:var(--card2);border-radius:10px;padding:10px 4px}
.nums b{display:block;font:900 24px/1.1 Unbounded,system-ui,sans-serif;color:var(--pink)}
.nums span{font-size:12px;color:var(--muted)}
.dist{display:flex;flex-direction:column;gap:4px}
.dist .row{display:flex;align-items:center;gap:8px;font-weight:700;font-size:13px}
.dist .row i{font-style:normal;width:18px;text-align:right;color:var(--muted)}
.dist .row b{background:var(--miss);border-radius:5px;padding:2px 7px;min-width:24px;text-align:right}
.dist .row.cur b{background:var(--pink);color:var(--bg)}
.arch{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px;max-height:60vh;overflow:auto;padding:2px}
.arch button{border:2px solid var(--pink);border-radius:10px;background:transparent;padding:8px 4px;display:flex;flex-direction:column;align-items:center;gap:2px}
.arch button b{font:900 15px/1 Unbounded,system-ui,sans-serif}
.arch button span{font-size:12px;color:var(--muted)}
.arch button.won{background:var(--hit);color:var(--hit-ink);border-color:var(--hit)} .arch button.won span{color:var(--hit-ink)}
.arch button.lost{background:var(--miss);border-color:#3a3240}
.arch button.go{border-style:dashed}

.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--text);color:var(--bg);font-weight:800;padding:10px 16px;border-radius:12px;box-shadow:var(--sh-s);z-index:20;max-width:calc(100vw - 32px)}

@media (max-width:700px){
  .hints{grid-template-columns:1fr}
  .top{padding-top:14px;gap:12px 8px}
  .logo{font-size:clamp(18px,5.4vw,28px)}
  .tab{font-size:14px;padding:5px 12px}
  .tool{width:33px;height:33px;font-size:16px;border-radius:10px;box-shadow:3px 3px 0 var(--wine)}
  .tool svg{width:18px;height:18px}
  .tools{gap:4px}
  .tile .v{font-size:14px}
  .tiles{grid-template-columns:repeat(4,1fr);gap:6px}
  .t-dir,.t-std{grid-column:span 2}
  .t-gen,.t-cast{grid-column:span 4}
  .tile{min-height:56px;padding:6px 8px 7px}
  .tile .v{font-size:15px}
  .result{flex-direction:column}
  .result img{width:120px}
  .ask,.guess{box-shadow:var(--sh-s)}
}
@media (max-width:380px){.tool{width:30px;height:30px;font-size:15px}.tool svg{width:16px;height:16px}.tools{gap:3px}.tab i{display:none}}
@media (max-width:340px){.logo{font-size:16px}.tool{width:28px;height:28px}}

/* статистика игроков (admins) */
dialog.wide{max-width:min(920px,calc(100vw - 24px))}
.tw{overflow-x:auto;margin:0 -2px;padding-bottom:4px}
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);text-align:left;padding:6px 8px;border-bottom:2px solid var(--wine);white-space:nowrap}
.tbl td{padding:7px 8px;border-bottom:1px solid #2a2430;vertical-align:top;font-variant-numeric:tabular-nums}
.tbl td small{display:block;color:var(--muted);font-size:12px}
.tbl td .note{font-style:normal;font-size:13px}
.chips2 .chip{display:inline-block;background:var(--card2);border-radius:999px;padding:4px 11px;margin:0 6px 6px 0;font-size:14px}
.chips2 .chip b{color:var(--pink);margin-left:3px}