/* Heardle Shuffle: all the styling for the game */

:root{
  --bg:#13111a;--card:#1d1a26;--card2:#272334;--line:#383148;--text:#f1ecf8;--dim:#9d94b0;
  --accent:#ffc832;--good:#5be3a1;--bad:#ff6b6b;--r:14px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}
body{padding:14px 14px 40px;max-width:760px;margin:0 auto}
header{text-align:center;margin:6px 0 14px;position:relative}
/* gold discs */
.rec{display:inline-block;width:20px;height:20px;border-radius:50%;vertical-align:-4px;flex:none;
  background:radial-gradient(circle,#3a2a08 0 10%,#ffe27a 11% 28%,transparent 29%),
    conic-gradient(from 30deg,rgba(255,255,255,.55),rgba(255,255,255,0) 20%,rgba(255,255,255,.4) 50%,rgba(255,255,255,0) 70%,rgba(255,255,255,.55)),
    repeating-radial-gradient(circle,#d9a520 0 1.4px,#a8790a 1.4px 2.8px);
  box-shadow:0 0 0 1px #6b4e06,0 0 8px rgba(255,200,50,.35)}
.rec.big{width:56px;height:56px;vertical-align:middle}
.wallet{position:absolute;right:0;top:4px;display:flex;align-items:center;gap:6px;background:var(--card);border:1px solid var(--line);
  border-radius:20px;padding:4px 10px 4px 6px;font-weight:800;font-size:15px}
.menuBtn{position:absolute;left:0;top:4px;width:40px;height:36px;border-radius:10px;border:1px solid var(--line);background:var(--card);cursor:pointer;
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;padding:0}
.menuBtn i{display:block;width:18px;height:2px;border-radius:2px;background:var(--text)}
.menuBtn:hover{border-color:var(--accent)}
.drawerBg{position:fixed;inset:0;z-index:350;background:rgba(8,6,12,.6);opacity:0;pointer-events:none;transition:opacity .25s}
.drawerBg.open{opacity:1;pointer-events:auto}
.drawer{position:fixed;left:0;top:0;bottom:0;z-index:360;width:min(320px,86vw);background:var(--card);border-right:1px solid var(--line);
  transform:translateX(-105%);visibility:hidden;transition:transform .28s ease,visibility 0s .28s;overflow-y:auto;padding:10px 10px 24px;box-shadow:10px 0 40px rgba(0,0,0,.5)}
.drawer.open{transform:none;visibility:visible;transition:transform .28s ease,visibility 0s}
.dHead{display:flex;align-items:center;justify-content:space-between;padding:6px 6px 12px;border-bottom:1px solid var(--line);margin-bottom:6px;font-size:17px;letter-spacing:.05em}
.dHead span{color:var(--accent)}
.dHead .x,.infoBox .x{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:var(--card2);color:var(--text);font-size:18px;cursor:pointer}
.dGroup{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--dim);font-weight:700;margin:14px 8px 4px}
.dItem{display:flex;align-items:center;gap:12px;width:100%;text-align:left;font:inherit;color:var(--text);background:none;border:0;border-radius:10px;padding:9px 8px;cursor:pointer;text-decoration:none}
.dItem:hover{background:var(--card2)}
.dItem .ico{width:26px;text-align:center;font-size:18px;flex:none}
.dItem b{display:block;font-size:15px;font-weight:600}
.dItem small{display:block;color:var(--dim);font-size:12px;margin-top:1px}
.dItem em{margin-left:auto;font-style:normal;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:#2a1f00;background:var(--accent);border-radius:10px;padding:2px 7px;flex:none}
.dItem.current{background:var(--card2)}
.dItem.current em{background:var(--good)}
.dItem.soon b,.dItem.soon .ico{opacity:.6}
.dItem:disabled{opacity:.4;cursor:not-allowed}
.infoBody{font-size:14px;line-height:1.6;color:var(--dim)}
.infoBody p{margin:0 0 12px}
.infoBody b{color:var(--text)}
.infoBody .more{display:block;text-align:center;margin:16px auto 4px;width:max-content;text-decoration:none;color:#1a1400;background:var(--accent);font-weight:800;border-radius:12px;padding:10px 18px}
.infoBody .ver{font-size:12px;border-top:1px solid var(--line);padding-top:10px;margin-top:6px}
.wallet{font-family:inherit;color:var(--text);cursor:pointer}
.wallet:hover{border-color:#ffd54a}
/* gold discs info pop-up */
.modal{position:fixed;inset:0;z-index:400;background:rgba(8,6,12,.72);display:flex;align-items:center;justify-content:center;padding:16px;opacity:0;pointer-events:none;transition:opacity .2s}
.modal.open{opacity:1;pointer-events:auto}
.modal .box{background:var(--card);border:1px solid #6b4e06;border-radius:18px;max-width:440px;width:100%;max-height:calc(100vh - 32px);overflow:auto;
  padding:20px 18px 18px;position:relative;transform:translateY(12px) scale(.97);transition:transform .25s;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.modal.open .box{transform:none}
.modal .x{position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:var(--card2);color:var(--text);font-size:18px;cursor:pointer;line-height:1}
.modal h2{margin:6px 0 2px;text-align:center;font-size:22px;color:#ffd54a}
.modal .lead{text-align:center;color:var(--dim);font-size:14px;margin:0 0 14px}
.modal .bal{display:flex;align-items:center;justify-content:center;gap:12px;margin:4px 0 6px;font-size:15px}
.modal .bal b{font-size:30px;color:var(--text)}
.modal .bal .rec{animation:spin 3s linear infinite}
.modal .streak{text-align:center;font-size:13px;color:var(--dim);margin-bottom:12px}
.modal h3{font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--dim);margin:16px 0 8px}
.modal table{width:100%;border-collapse:collapse;font-size:14px}
.modal td{padding:7px 4px;border-top:1px solid var(--line);vertical-align:top}
.modal td:last-child{text-align:right;white-space:nowrap;font-weight:800;color:#ffd54a}
.modal td small{display:block;color:var(--dim);font-size:12px;font-weight:400}
.modal td .rec{width:15px;height:15px;vertical-align:-2px;margin-left:3px}
.modal .sec{border:1px solid var(--line);border-radius:12px;margin-top:8px;background:var(--card2);overflow:hidden}
.modal .sec[open]{border-color:#6b4e06}
.modal .sec summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:11px 40px 11px 12px;position:relative;user-select:none}
.modal .sec summary::-webkit-details-marker{display:none}
.modal .sec summary::after{content:'';position:absolute;right:16px;top:50%;width:8px;height:8px;border-right:2px solid var(--dim);border-bottom:2px solid var(--dim);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s}
.modal .sec[open] summary::after{transform:translateY(-30%) rotate(-135deg);border-color:#ffd54a}
.modal .sec summary:hover b{color:#ffd54a}
.modal .sec summary .ico{font-size:18px}
.modal .sec summary b{display:block;font-size:15px}
.modal .sec summary small{display:block;color:var(--dim);font-size:12px;margin-top:1px}
.modal .sec table{margin:0 12px 8px;width:calc(100% - 24px)}
.modal .sec .tip{margin:0 12px 12px}
.modal .tip{background:var(--card);border-radius:10px;padding:10px 12px;font-size:13px;color:var(--dim);margin-top:14px;line-height:1.45}
.wallet.bump{animation:bump .5s}
@keyframes bump{40%{transform:scale(1.25)}}
@media(max-width:480px){header h1{font-size:23px}.wallet{position:static;display:inline-flex;margin-top:8px}}
.hintbar{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin:10px 0 2px}
.hintbar .lbl{font-size:12px;color:var(--dim);align-self:center;text-transform:uppercase;letter-spacing:.1em;font-weight:700}
.hintbar button{font:inherit;font-size:13px;border-radius:20px;border:1px solid #6b4e06;background:#2b2412;color:var(--text);padding:6px 10px;cursor:pointer;display:flex;gap:6px;align-items:center}
.hintbar button .rec{width:16px;height:16px;vertical-align:-3px}
.hintbar button:hover:not(:disabled){border-color:#ffd54a}
.hintbar button:disabled{opacity:.35;cursor:default}
.tile.unheard canvas{opacity:.4}
.tile.unheard .lab{opacity:.7}
.heardme{position:absolute;right:4px;bottom:3px;z-index:2;font-size:13px;line-height:1;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6));pointer-events:none}
.spot.locked .tile{cursor:not-allowed}
.lockicon{position:absolute;right:5px;bottom:4px;z-index:3;font-size:12px;line-height:1;pointer-events:none;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}
.tile.hinted{box-shadow:inset 0 0 0 3px #ffd54a}
.hintnum{position:absolute;top:4px;left:5px;z-index:2;min-width:20px;height:20px;border-radius:10px;padding:0 5px;background:#ffd54a;color:#2a1f00;
  font-size:12px;font-weight:900;display:grid;place-items:center;box-shadow:0 1px 3px rgba(0,0,0,.5)}
.toast{position:fixed;left:50%;top:14px;transform:translate(-50%,calc(-100% - 40px));visibility:hidden;z-index:300;display:flex;align-items:center;gap:12px;
  background:#2b2412;border:1px solid #ffd54a;border-radius:14px;padding:10px 16px;box-shadow:0 10px 30px rgba(0,0,0,.6);
  color:var(--text);font-size:14px;transition:transform .4s cubic-bezier(.2,1.4,.4,1),visibility 0s .4s;max-width:calc(100% - 32px)}
.toast.show{transform:translate(-50%,0);visibility:visible;transition:transform .4s cubic-bezier(.2,1.4,.4,1),visibility 0s}
.toast b{color:#ffd54a;font-size:16px}
.toast .rec{width:34px;height:34px;animation:spin 2.4s linear infinite}
.bside{display:flex;gap:12px;align-items:center;text-align:left;background:#2b2412;border:1px solid #6b4e06;border-radius:12px;padding:10px 14px;margin:12px auto 0;max-width:460px;font-size:13px;color:var(--dim)}
.bside b{color:#ffd54a;font-size:14px}
.bside .rec{width:30px;height:30px}
.award{margin:10px auto 4px;display:flex;align-items:center;justify-content:center;gap:12px;font-size:18px;font-weight:800;color:#ffd54a}
.award .rec{animation:spin 2.4s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
header h1{margin:0;font-size:28px;letter-spacing:.06em;font-weight:800}
header h1 span{color:var(--accent)}
header p{margin:2px 0 0;color:var(--dim);font-size:13px}
.modes{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}
.modes button{font:inherit;padding:10px 6px;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--text);cursor:pointer;line-height:1.2}
.modes button small{display:block;color:var(--dim);font-size:11px;margin-top:2px}
.modes button.on{border-color:var(--accent);background:#2e2817}
.modes button .tick{color:var(--good)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.center{text-align:center}
.big{font-size:18px;margin:6px 0 14px;line-height:1.45}
.dim{color:var(--dim);font-size:14px}
button.btn{font:inherit;border-radius:12px;border:1px solid var(--line);background:var(--card2);color:var(--text);padding:11px 16px;cursor:pointer;font-size:15px}
button.btn:hover:not(:disabled){border-color:var(--accent)}
button.btn:disabled{opacity:.4;cursor:default}
button.primary{background:var(--accent);color:#1a1400;border-color:var(--accent);font-weight:800}
.row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:14px}
.timer{font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;font-size:38px;font-weight:700;color:var(--accent);text-align:center;margin:0 0 4px}
.pen{text-align:center;color:var(--dim);font-size:13px;min-height:18px}
/* tiles */
.tiles{display:grid;gap:8px;margin-top:14px;user-select:none;-webkit-user-select:none}
.tiles.n3{grid-template-columns:repeat(3,1fr)}
.tiles.n6{grid-template-columns:repeat(3,1fr)}
.tiles.n12{grid-template-columns:repeat(4,1fr)}
.tile{position:relative;border-radius:12px;border:2px solid transparent;cursor:grab;touch-action:none;overflow:hidden;
  aspect-ratio:1.5;display:flex;flex-direction:column;justify-content:flex-end;transition:transform .15s,border-color .15s;background:var(--card2)}
.tiles.n3 .tile{aspect-ratio:1.1}
.tile canvas{position:absolute;inset:0;width:100%;height:100%}
.tile .lab{position:relative;font-weight:800;font-size:15px;padding:4px 7px;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.tile .pos{position:absolute;top:5px;right:7px;font-size:11px;color:rgba(255,255,255,.7);font-family:ui-monospace,Menlo,monospace}
.tile.playing{border-color:#fff;transform:scale(1.04)}
.tile.target{border-color:var(--accent);border-style:dashed}
.tile.dragging{opacity:.9;z-index:10;cursor:grabbing;transition:none;box-shadow:0 10px 30px rgba(0,0,0,.6)}
.tile.ghost{opacity:.25}
.modes button:disabled{opacity:.35;cursor:not-allowed}
.howto:disabled{opacity:.35;cursor:not-allowed;text-decoration:none}
.lockmsg{text-align:center;color:var(--dim);font-size:12px;margin:-8px 0 10px}
.howto{display:block;margin:-4px auto 12px;background:none;border:none;color:var(--accent);font:inherit;font-size:14px;cursor:pointer;text-decoration:underline}
.preview-bar{height:10px;background:var(--card2);border-radius:5px;overflow:hidden;margin:18px 0 8px}
.preview-bar i{display:block;height:100%;width:0;background:var(--accent)}
.help p{margin:0 0 6px}
.zone-label{margin:16px 0 6px;font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--dim);font-weight:700;display:flex;justify-content:space-between;gap:8px}
.zone-label span{text-transform:none;letter-spacing:0;font-weight:400}
.tiles.tray,.tiles.line{margin-top:0}
.tiles.n6,.tiles.n12{grid-template-columns:repeat(6,1fr)}
.tiles.n6 .tile,.tiles.n12 .tile,.tiles.n6 .spot,.tiles.n12 .spot{aspect-ratio:1}
.tiles.n6 .tile .lab,.tiles.n12 .tile .lab{font-size:13px;padding:3px 5px}
.spot{position:relative;border-radius:12px;aspect-ratio:1.5}
.tiles.n3 .spot{aspect-ratio:1.1}
.spot.empty{border:2px dashed var(--line)}
.line .spot.empty{background:rgba(255,255,255,.02)}
.spot .num{position:absolute;inset:0;display:grid;place-items:center;color:var(--dim);font-size:13px;font-family:ui-monospace,Menlo,monospace;pointer-events:none}
.spot>.tile{position:absolute;inset:0;aspect-ratio:auto}
/* one ring per slot, drawn the same way on every browser (iOS Safari draws outlines differently) */
.spot::after{content:'';position:absolute;inset:-5px;border-radius:16px;border:3px solid transparent;pointer-events:none;z-index:4}
.spot.sel::after{border-color:var(--accent)}
.spot.target::after{border-color:var(--accent);border-style:dashed}
.spot.playing::after{border-color:#fff}
.tile.ghost{opacity:.25}
.drag-clone{position:fixed;pointer-events:none;z-index:50;transform:translate(-50%,-50%) scale(1.08);box-shadow:0 12px 30px rgba(0,0,0,.6);border-radius:12px;overflow:hidden}
.spot.mk-g{box-shadow:0 0 0 3px var(--good)}
.spot.mk-y{box-shadow:0 0 0 3px var(--accent)}
.spot.mk-r{box-shadow:0 0 0 3px var(--bad)}
.badge{position:absolute;top:-7px;right:-7px;z-index:3;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:900;color:#14121a;pointer-events:none}
.mk-g .badge{background:var(--good)}.mk-y .badge{background:var(--accent)}.mk-r .badge{background:var(--bad)}
.key{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;font-size:12px;color:var(--dim);margin-top:10px}
.key i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:4px;vertical-align:-1px}
.shake{animation:shake .4s}
@keyframes shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
.msg{text-align:center;min-height:22px;margin-top:10px;font-size:15px}
.msg.bad{color:var(--bad)}.msg.good{color:var(--good)}
/* end */
.song{display:flex;gap:12px;align-items:center;justify-content:center;margin:12px 0}
.song img{width:72px;height:72px;border-radius:10px;object-fit:cover;background:var(--card2)}
.song .t{font-size:19px;font-weight:800}.song .a{color:var(--dim)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:16px 0 4px}
.stats div{background:var(--card2);border-radius:10px;padding:8px 4px;text-align:center}
.stats b{display:block;font-size:20px}.stats small{color:var(--dim);font-size:11px}
.hidden{display:none!important}
a{color:var(--accent)}
.help{font-size:13px;color:var(--dim);line-height:1.5;margin-top:12px}
.help b{color:var(--text)}
#scBox{position:fixed;left:0;bottom:0;width:320px;height:166px;overflow:hidden;opacity:.01;pointer-events:none;z-index:-1}
#scBox.show{opacity:1;pointer-events:auto;z-index:200;left:50%;bottom:120px;transform:translateX(-50%);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.6)}
#scBox iframe{border:0;display:block}
.devbar{flex-wrap:wrap;justify-content:center}
#scInfo{font-weight:400;letter-spacing:0;color:var(--dim);font-family:ui-monospace,Menlo,monospace;font-size:11px;width:100%;text-align:center}
.devbar{position:relative;margin:24px auto 0;width:max-content;max-width:100%;display:flex;gap:10px;align-items:center;
  background:#3a1220;border:1px solid var(--bad);border-radius:12px;padding:6px 8px 6px 12px;font-size:12px;font-weight:800;letter-spacing:.08em;color:var(--bad);box-shadow:0 6px 20px rgba(0,0,0,.5)}
.devbar .btn{padding:6px 10px;font-size:13px;letter-spacing:0}

/* ad space at the bottom of the page (never covers the game) */
.ad-slot{display:flex;justify-content:center;margin:28px auto 0;max-width:516px;width:100%;min-height:250px;overflow:hidden}
/* text for search engines and for players with JavaScript turned off */
.noscript{max-width:520px;margin:20px auto;text-align:center;color:var(--dim);line-height:1.6}