/* Additions for the hosted site (on top of styles.css shared with the prototype). */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body{margin:0;min-height:100dvh}
*,*::before,*::after{box-sizing:border-box}
.footer{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;font-size:.82rem;color:var(--muted);padding-block:8px}
.footer a{color:var(--muted)}
a{color:var(--accent)}
.countdown{font-family:var(--mono);font-size:.9rem;color:var(--muted)}
.countdown b{color:var(--ink);font-variant-numeric:tabular-nums}
.ts{min-height:0}
.ts:not(:empty){min-height:65px}
.btn[aria-busy="true"]{opacity:.7;cursor:progress}
.danger{color:var(--miss)}
.btn.danger{background:var(--miss);color:var(--on-accent)}
.confirm{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:10px 12px;border-radius:10px;background:var(--miss-soft)}
.fatal{border-color:var(--miss)}
.skeleton{height:90px;border-radius:8px;background:var(--soft)}
@media (prefers-reduced-motion:no-preference){.skeleton{animation:pulse 1.2s ease-in-out infinite}}
@keyframes pulse{50%{opacity:.55}}
[hidden]{display:none!important}
img{max-width:100%}
.msg.warm{color:var(--warm)}
.warmrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.warmlist{list-style:none;margin:0;padding:0;display:flex;gap:6px;flex-wrap:wrap}
.warmlist li{padding:3px 10px;border-radius:999px;background:var(--warm-soft);color:var(--warm);font-family:var(--mono);font-size:.85rem;font-weight:700}
.warmlist li.new{animation:pop .4s ease-out}
:root{--warm:#B4530A;--warm-soft:#FBE7D3}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--warm:#F59E4B;--warm-soft:#3A2614}}
:root[data-theme="dark"]{--warm:#F59E4B;--warm-soft:#3A2614}
.namerow{display:flex;gap:6px}
.namerow input{flex:1;min-width:0}
.btn.dice{padding:8px 12px;font-size:1.1rem;line-height:1}
.invite{border-color:var(--accent)}
.invite p{margin:0}
.groupbox{gap:8px}
.groupbox p{margin:0}
.joinrow input{flex:1 1 140px;min-width:0;border:1.5px solid var(--line);background:var(--surface);border-radius:10px;padding:10px 12px;text-transform:uppercase}
.invitelink{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.invitelink code{flex:1 1 200px;min-width:0;font-family:var(--mono);font-size:.85rem;background:var(--soft);border-radius:8px;padding:9px 10px;word-break:break-all}
.gcode{font-family:var(--mono);color:var(--ink);letter-spacing:.12em}
.practice{margin:0;padding:9px 12px;border-radius:10px;background:var(--warm-soft);color:var(--warm);font-weight:600;font-size:.9rem}
/* "You" block: name and friend group together */
.you{gap:10px}
.yourow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0}
.yourow .eyebrow{flex:0 0 4.5rem;margin:0}
.yourow #pname,.yourow #joinCode{flex:1 1 140px;min-width:0;border:1.5px solid var(--line);background:var(--surface);border-radius:10px;padding:9px 12px}
.yourow #joinCode{text-transform:uppercase}
.yourow .gcode{font-family:var(--mono);font-weight:700;font-size:1.05rem;letter-spacing:.14em;flex:1 1 auto}
.btn.sm{padding:8px 12px;font-size:.9rem}
.linkbtn.sm{padding:6px 2px;min-height:0;font-size:.9rem}
.note.small{font-size:.82rem;min-height:1.2em;margin:0}
.footer .linkbtn{color:var(--muted);font-weight:500;font-size:.82rem;padding:0;min-height:0;text-decoration:underline}
.footer .confirm{background:none;padding:0;color:var(--ink)}
.footer .linkbtn.danger{color:var(--miss)}
.yourow #joinCode{flex:1 1 90px}
.yourow #joinCode::placeholder{text-transform:none}
.linkbtn.report{padding:0;min-height:0;font-size:.85rem;font-weight:600;color:var(--muted)}
/* Your guesses */
.guesses{display:flex;flex-direction:column;gap:6px}
.guesslist{list-style:none;margin:0;padding:0;display:flex;gap:6px;flex-wrap:wrap}
.guesslist li{padding:3px 10px;border-radius:999px;font-family:var(--mono);font-size:.85rem;font-weight:700;border:1px solid var(--line);color:var(--muted);background:transparent}
.guesslist li.warm{background:var(--warm-soft);color:var(--warm);border-color:transparent}
.guesslist li.bad{color:var(--miss);border-color:currentColor}
.guesslist li.off{text-decoration:line-through;text-decoration-thickness:1px;opacity:.8}
.guesslist li.new{animation:pop .4s ease-out}
.invite:has(> .linkbtn){flex-direction:row;align-items:flex-start;gap:12px}
.invite:has(> .linkbtn) p{flex:1}
.invite > .linkbtn{color:var(--muted);text-decoration:none;font-size:1rem}
.guesslist li.cold{color:var(--muted)}
/* Closeness heat for wrong guesses */
:root{--hot:#B4400A;--hot-soft:#FDE3CF;--tepid:#7A5C00;--tepid-soft:#FFF1C2;--cool:#1F5F99;--cool-soft:#DCEBF9;--cold-soft:#F6DEDB}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--hot:#FF9A5C;--hot-soft:#3D2212;--tepid:#F2CF63;--tepid-soft:#352B0C;--cool:#7DB8F0;--cool-soft:#112A40;--cold-soft:#3A1A17}}
:root[data-theme="dark"]{--hot:#FF9A5C;--hot-soft:#3D2212;--tepid:#F2CF63;--tepid-soft:#352B0C;--cool:#7DB8F0;--cool-soft:#112A40;--cold-soft:#3A1A17}
.guesslist li.heat{border-color:transparent}
.guesslist li.heat b{font-weight:800;margin-left:2px}
.guesslist li.hot{background:var(--hot-soft);color:var(--hot)}
.guesslist li.warm.heat{background:var(--tepid-soft);color:var(--tepid)}
.guesslist li.cool{background:var(--cool-soft);color:var(--cool)}
.guesslist li.cold{background:var(--cold-soft);color:var(--miss)}
.msg.bad.hot{color:var(--hot)} .msg.bad.warm{color:var(--tepid)} .msg.bad.cool{color:var(--cool)}
.you #saved:empty{min-height:0;margin-top:-10px} /* no blank line under the buttons when there is no message */