/* Jahtinoppa */
:root {
  --bg:#07150d;--felt:#0c1e12;--card:#112518;--card2:#172f1e;
  --border:#1e3d27;--border2:#254f30;--gold:#d4a843;--gold-dim:#8a6b22;
  --cream:#f0ead8;--cream-dim:#a09880;--green-hi:#2ecc71;--red-hi:#e74c3c;
  --text:#e4ddc8;--text-dim:#7a8c75;--die-face:#f5f0e0;--die-dot:#1a3322;
  --die-held:#fef3c0;--die-held-b:#d4a843;--hover-bg:rgba(212,168,67,.12);--hover-text:#f0c060;
  font-family:'DM Sans',sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
body{background:var(--bg);color:var(--text);min-height:100vh;display:flex;flex-direction:column;align-items:center;background-image:radial-gradient(ellipse 80% 50% at 50% -10%,rgba(46,204,113,.07) 0%,transparent 70%);}
h1,h2,h3{font-family:'Playfair Display',serif;}
header{width:100%;padding:.9rem 2rem;background:var(--felt);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:50;}
.header-actions{display:flex;align-items:center;gap:1rem;}
.logo{font-family:'Playfair Display',serif;font-size:1.5rem;font-weight:900;color:var(--gold);letter-spacing:.03em;cursor:pointer;user-select:none;transition:opacity .15s;}
.logo:hover{opacity:.8;}
.logo sup{font-size:.55em;color:var(--cream-dim);vertical-align:super;}
#badge{display:none;align-items:center;gap:.6rem;background:var(--card);border:1px solid var(--border);padding:.3rem .85rem;border-radius:99px;font-size:.82rem;color:var(--text-dim);}
#badge.on{display:flex;}
#badge strong{color:var(--cream);font-weight:600;}
.conn-dot{width:7px;height:7px;border-radius:50%;background:var(--text-dim);transition:background .3s;}
.conn-dot.ok{background:var(--green-hi);box-shadow:0 0 6px var(--green-hi);}
.conn-dot.err{background:var(--red-hi);}
.conn-dot.blink{animation:blink 1s infinite;background:var(--gold);}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
.snd-wrap{position:relative;display:none;}
.snd-wrap.on{display:block;}
.snd-menu-btn{background:var(--card);border:1px solid var(--border);color:var(--text-dim);padding:.3rem .8rem;border-radius:99px;cursor:pointer;font-size:.78rem;font-family:'DM Sans',sans-serif;transition:background .15s;white-space:nowrap;}
.snd-menu-btn:hover{background:var(--card2);color:var(--text);}
.snd-panel{display:none;position:absolute;top:calc(100% + 8px);right:0;background:var(--card);border:1px solid var(--border2);border-radius:12px;padding:.85rem 1.1rem;min-width:220px;z-index:200;box-shadow:0 8px 28px rgba(0,0,0,.6);}
.snd-panel.on{display:block;}
.snd-panel-hdr{font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--text-dim);margin-bottom:.65rem;font-weight:600;}
.snd-row{display:flex;align-items:center;justify-content:space-between;padding:.38rem 0;font-size:.84rem;color:var(--text);}
.snd-row:not(:last-child){border-bottom:1px solid var(--border);}
.pill{position:relative;display:inline-block;width:36px;height:20px;cursor:pointer;flex-shrink:0;}
.pill input{opacity:0;position:absolute;width:0;height:0;}
.pill-track{position:absolute;inset:0;border-radius:10px;background:var(--border2);transition:background .2s;}
.pill input:checked + .pill-track{background:var(--gold);}
.pill-thumb{position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:#fff;transition:left .18s;pointer-events:none;}
.pill input:checked ~ .pill-thumb{left:19px;}
/* Custom range slider */
input[type=range] {-webkit-appearance:none;appearance:none;width:100%;background:transparent;height:16px;outline:none;}
input[type=range]::-webkit-slider-thumb {-webkit-appearance:none;height:14px;width:14px;border-radius:50%;background:var(--gold);cursor:pointer;margin-top:-5px;box-shadow:0 0 4px rgba(0,0,0,0.5);}
input[type=range]::-webkit-slider-runnable-track {width:100%;height:4px;cursor:pointer;background:var(--border2);border-radius:2px;}
input[type=range]::-moz-range-thumb {height:14px;width:14px;border-radius:50%;background:var(--gold);cursor:pointer;border:none;}
input[type=range]::-moz-range-track {width:100%;height:4px;cursor:pointer;background:var(--border2);border-radius:2px;}

.forfeit-btn{display:none;background:transparent;border:1px solid var(--red-hi);color:var(--red-hi);border-radius:6px;padding:.3rem .6rem;cursor:pointer;font-size:.8rem;font-family:'DM Sans',sans-serif;}
.forfeit-btn.on{display:block;}
.forfeit-btn:hover{background:var(--red-hi);color:#fff;}
.screen{width:100%;max-width:1060px;padding:2rem;}
[hidden]{display:none !important;}
#s-start{max-width:480px;flex-grow:1;display:flex;flex-direction:column;justify-content:center;}
.start-wrap{background:var(--felt);border:1px solid var(--border);border-radius:20px;padding:2.8rem 2.4rem;text-align:center;}
.start-wrap h2{font-size:2.6rem;color:var(--gold);margin-bottom:.4rem;}
.start-wrap .tagline{color:var(--text-dim);font-size:.9rem;margin-bottom:2rem;line-height:1.6;}
.prod{color:var(--text-dim);font-size:.9rem;margin-top:2rem;line-height:1.6;}
.dice-preview{display:flex;gap:.5rem;justify-content:center;margin-bottom:1.8rem;}
.d-mini{width:34px;height:34px;background:var(--die-face);border-radius:6px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);padding:4px;gap:2px;}
.d-mini .dd{border-radius:50%;background:var(--die-dot);}
.d-mini .dd.off{opacity:0;}
.name-field{position:relative;}
.name-field input[type=text]{padding-right:2.6rem;}
.name-clear{position:absolute;right:.55rem;top:50%;transform:translateY(-50%);background:var(--border);border:1px solid var(--border2);color:var(--text-dim);border-radius:4px;width:22px;height:22px;cursor:pointer;font-size:.72rem;font-family:'DM Sans',sans-serif;display:flex;align-items:center;justify-content:center;padding:0;transition:all .15s;line-height:1;}
.name-clear:hover{background:var(--red-hi);color:#fff;border-color:var(--red-hi);}
input[type=text]{width:100%;padding:.7rem 1.1rem;background:var(--card2);border:1px solid var(--border2);border-radius:10px;color:var(--cream);font-size:.95rem;font-family:'DM Sans',sans-serif;outline:none;transition:border .2s;}
input[type=text]:focus{border-color:var(--gold);}
input[type=text]::placeholder{color:var(--text-dim);text-transform:none;}
.btn{display:block;width:100%;padding:.75rem 1.4rem;border:none;border-radius:10px;font-size:.95rem;font-weight:600;font-family:'DM Sans',sans-serif;cursor:pointer;transition:all .18s;margin-top:.65rem;}
.btn-gold{background:var(--gold);color:#1a1000;}
.btn-gold:hover{background:#e0b84e;transform:translateY(-1px);}
.btn-outline{background:transparent;color:var(--text);border:1px solid var(--border2);}
.btn-outline:hover{background:var(--card2);}
.btn-sp{opacity:.8;}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none !important;}
.sep{display:flex;align-items:center;gap:.8rem;color:var(--text-dim);font-size:.8rem;margin:.8rem 0;}
.sep::before,.sep::after{content:'';flex:1;height:1px;background:var(--border);}
#s-lobby{max-width:440px;}
.lobby-card{background:var(--felt);border:1px solid var(--border);border-radius:20px;padding:2.8rem 2.4rem;margin:3rem auto;text-align:center;}
.lobby-card h2{font-size:1.6rem;color:var(--cream);margin-bottom:.5rem;}
.lobby-card p{color:var(--text-dim);font-size:.9rem;margin-bottom:1.2rem;}
.room-code{font-family:'Playfair Display',serif;font-size:3rem;font-weight:900;letter-spacing:.5rem;color:var(--gold);background:var(--card);border:1px solid var(--border2);border-radius:14px;padding:1rem 1.8rem;margin-bottom:.8rem;cursor:pointer;transition:background .2s;}
.room-code:hover{background:var(--card2);}
.copy-hint{font-size:.75rem;color:var(--text-dim);margin-bottom:.6rem;}
.invite-box{display:none;margin-bottom:.9rem;}
.invite-url-row{display:flex;background:var(--card);border:1px solid var(--border2);border-radius:8px;overflow:hidden;}
.invite-url-txt{flex:1;padding:.4rem .7rem;font-size:.72rem;color:var(--text-dim);font-family:'Courier New',monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;line-height:1.8;}
.invite-copy-btn{background:var(--card2);border:none;border-left:1px solid var(--border);color:var(--gold);padding:.4rem .8rem;cursor:pointer;font-size:.78rem;font-weight:600;font-family:'DM Sans',sans-serif;flex-shrink:0;transition:background .15s;}
.invite-copy-btn:hover{background:var(--border2);}
.status-row{display:flex;align-items:center;justify-content:center;gap:.5rem;color:var(--text-dim);font-size:.88rem;}
.pulse{width:8px;height:8px;border-radius:50%;background:var(--gold);animation:blink 1.4s infinite;}
#s-game{padding:1.4rem 1.8rem;}
@media(min-width:900px){
  #s-game{display:grid;grid-template-columns:1fr 340px;gap:1.5rem;align-items:start;}
}
.col-left{display:flex;flex-direction:column;gap:1.2rem;}
.col-right{display:flex;flex-direction:column;gap:1.2rem;}
.dice-panel{background:var(--felt);border:1px solid var(--border);border-radius:18px;padding:1.4rem 1.8rem;display:flex;flex-direction:column;align-items:center;gap:.8rem;}
.turn-label{font-size:.92rem;color:var(--text-dim);min-height:1.3em;}
.turn-label em{color:var(--gold);font-style:normal;font-weight:600;}
.dice-row{display:flex;gap:.9rem;flex-wrap:wrap;justify-content:center;}
.die{width:76px;height:76px;background:var(--die-face);border-radius:14px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);padding:9px;gap:3px;cursor:default;border:3px solid transparent;box-shadow:0 6px 18px rgba(0,0,0,.55);transition:transform .15s,box-shadow .15s,border-color .15s,background .15s,opacity .35s;position:relative;}
.die.clickable{cursor:pointer;}
.die.clickable:not(.held):hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(0,0,0,.7);}
.die.held{background:var(--die-held);border-color:var(--die-held-b);transform:translateY(-6px);box-shadow:0 10px 22px rgba(212,168,67,.35);}
.die.held::after{content:'PID\00C4';position:absolute;bottom:-22px;left:50%;transform:translateX(-50%);font-size:.6rem;font-weight:700;color:var(--gold);letter-spacing:.08em;}
.die.idle{animation:fadeIdle .4s ease forwards;}
@keyframes fadeIdle{from{opacity:1}to{opacity:.38}}
.die.rolling{animation:diceRoll .11s ease-in-out infinite alternate;}
.die.rolling .dot{opacity:0 !important;}
.die.rolling::after{
  content:'?';
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:'Playfair Display', serif;
  font-size:2.8rem;
  font-weight:900;
  color:var(--die-dot);
}
@keyframes diceRoll{from{transform:rotate(-5deg) scale(1.06);}to{transform:rotate(5deg) scale(1.06);}}
.dot{border-radius:50%;background:var(--die-dot);width:100%;height:100%;}
.dot.off{opacity:0;}
.roll-area{display:flex;align-items:center;gap:1.2rem;margin-top:.3rem;}
.roll-btn{padding:.7rem 2.2rem;background:var(--gold);color:#160e00;border:none;border-radius:10px;font-family:'DM Sans',sans-serif;font-size:1rem;font-weight:700;cursor:pointer;transition:all .18s;box-shadow:0 4px 14px rgba(212,168,67,.3);}
.roll-btn:hover:not(:disabled){background:#e0b84e;transform:translateY(-2px);box-shadow:0 7px 20px rgba(212,168,67,.45);}
.roll-btn:disabled{opacity:.35;cursor:not-allowed;transform:none;box-shadow:none;}
.rolls-left{font-size:.85rem;color:var(--text-dim);background:var(--card);border:1px solid var(--border);padding:.35rem .8rem;border-radius:99px;}
.score-panel{background:var(--felt);border:1px solid var(--border);border-radius:18px;overflow:hidden;}
.panel-header{padding:.75rem 1.5rem;border-bottom:1px solid var(--border);font-size:.78rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);}
table.st{width:100%;border-collapse:collapse;table-layout:fixed;}
table.st th:first-child{width:48%;} /* Lukitsee kategoriasarakkeen koon, jolloin pelaajien sarakkeet jakavat tasaisesti lopun tilan */
table.st th{padding:.6rem 1rem;text-align:center;font-size:.82rem;font-weight:600;color:var(--text-dim);border-bottom:2px solid var(--border);background:var(--card);}
table.st th.pname{font-family:'Playfair Display',serif;font-size:.95rem;color:var(--cream);}
table.st th.pname.active{color:var(--gold);}
table.st td{padding:.45rem 1rem;text-align:center;font-size:.88rem;border-bottom:1px solid var(--border);overflow:hidden;text-overflow:ellipsis;}
table.st tbody tr:nth-child(even) td.cat,
table.st tbody tr:nth-child(even) td.sc{background:rgba(255,255,255,.02);}
table.st td.cat{text-align:left;padding-left:1.6rem;color:var(--text);font-size:.85rem;}
table.st td.cat small{color:var(--text-dim);font-size:.72rem;margin-left:.3rem;}
table.st td.sc{min-width:88px;border-left:1px solid var(--border);transition:background .15s,color .15s;}
table.st td.sc.avail{cursor:pointer;color:var(--text-dim);}
table.st td.sc.avail:hover,table.st td.sc.preview{background:var(--hover-bg) !important;color:var(--hover-text);font-weight:700;}
table.st td.sc.locked{color:var(--cream);font-weight:600;}
table.st td.sc.zero{color:var(--text-dim);}
table.st tr.sec-hdr td{background:var(--card) !important;font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--text-dim);font-weight:700;padding:.3rem 1.6rem;border-bottom:1px solid var(--border);}
table.st tr.sub td{background:var(--card2) !important;font-weight:700;border-top:1px solid var(--border2);font-size:.85rem;}
table.st tr.sub td.cat{color:var(--gold);}
table.st tr.bonus td{color:#f0c060;font-size:.82rem;background:var(--felt) !important;}
table.st tr.grand td{background:var(--card) !important;border-top:2px solid var(--border2);font-weight:700;font-size:.9rem;}
table.st tr.grand td.cat{color:var(--gold);}
.feed-panel{background:var(--felt);border:1px solid var(--border);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;max-height:280px;}
.feed-list{flex-grow:1;overflow-y:auto;padding:.8rem 1.5rem;display:flex;flex-direction:column;gap:.2rem;scroll-behavior:smooth;}
.feed-list::-webkit-scrollbar,.chat-list::-webkit-scrollbar{width:4px;}
.feed-list::-webkit-scrollbar-track,.chat-list::-webkit-scrollbar-track{background:transparent;}
.feed-list::-webkit-scrollbar-thumb,.chat-list::-webkit-scrollbar-thumb{background:var(--border2);border-radius:4px;}
.fe{font-size:.82rem;color:var(--text-dim);border-bottom:1px solid rgba(255,255,255,.03);padding:.18rem 0;}
.fe .ts{font-size:.7rem;color:var(--border2);margin-right:.4rem;}
.fe.sys{color:var(--gold-dim);}
.fe.hi{color:var(--gold);font-weight:600;}
.fe.err{color:var(--red-hi);}
.chat-panel{background:var(--felt);border:1px solid var(--border);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;height:300px;}
.chat-list{flex-grow:1;overflow-y:auto;padding:.8rem 1.5rem;display:flex;flex-direction:column;gap:.4rem;}
.c-msg{font-size:.85rem; white-space: normal; word-break: break-all; overflow-wrap: break-word;}
.c-msg strong{color:var(--cream);}
.c-msg.me strong{color:var(--gold);}
.chat-input-area{display:flex;border-top:1px solid var(--border);}
.chat-input-area input{flex-grow:1;background:var(--felt);border:none;border-radius:0;padding:.6rem 1rem;color:var(--text);font-size:.85rem;outline:none;}
.chat-input-area button{background:var(--card2);border:none;color:var(--gold);padding:0 1rem;cursor:pointer;font-weight:600;font-family:'DM Sans',sans-serif;}
.chat-input-area button:hover{background:var(--border);}
.chat-input-area input:disabled, .chat-input-area button:disabled{opacity:0.5;cursor:not-allowed;}
.ai-badge{display:inline-block;background:rgba(212,168,67,.1);color:var(--gold-dim);font-size:.68rem;border:1px solid var(--gold-dim);border-radius:4px;padding:.1rem .35rem;margin-left:.4rem;vertical-align:middle;letter-spacing:.05em;}
#end-overlay, #join-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.88);align-items:center;justify-content:center;z-index:200;}
#end-overlay.on{display:flex;}
.end-card, .join-card{background:var(--felt);border:1px solid var(--border2);border-radius:22px;padding:2.8rem 2.5rem;max-width:480px;width:92%;text-align:center;animation:rise .4s ease-out;}
#join-overlay { z-index: 250; }
.join-card { position: relative; z-index: 251; padding: 2.2rem; }
@keyframes rise{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
.end-card h2, .join-card h2{font-size:2rem;color:var(--gold);margin-bottom:.4rem;}
.end-card .sub{color:var(--text-dim);margin-bottom:1.6rem;font-size:.9rem;}
.end-scores{display:flex;justify-content:center;gap:2.5rem;margin:1.6rem 0;}
.end-score-item .name{color:var(--text-dim);font-size:.85rem;}
.end-score-item .pts{font-family:'Playfair Display',serif;font-size:2.6rem;font-weight:900;color:var(--gold);}
.hs-badge{background:linear-gradient(135deg,var(--gold),#e07830);color:#160c00;border-radius:10px;padding:.5rem 1rem;font-weight:700;font-size:.9rem;margin:.8rem 0 1.2rem;display:none;}
.hs-badge.on{display:block;}
.btn-row{display:flex;gap:.6rem;justify-content:center;}
.btn-row .btn{margin-top:0;}
.rematch-hint{font-size:.78rem;color:var(--text-dim);margin-top:.5rem;min-height:1.2em;}
#policy-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.85);align-items:flex-start;justify-content:center;z-index:300;padding:2rem 1rem;overflow-y:auto;}
#policy-overlay.on{display:flex;}
.policy-card{background:var(--felt);border:1px solid var(--border2);border-radius:18px;padding:2rem 2.2rem;max-width:560px;width:100%;animation:rise .3s ease-out;margin:auto;}
.policy-hdr{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1.2rem;}
.policy-hdr h3{font-family:'Playfair Display',serif;color:var(--gold);font-size:1.35rem;}
.policy-close{background:none;border:none;color:var(--text-dim);font-size:1.4rem;cursor:pointer;line-height:1;padding:.1rem .3rem;font-family:'DM Sans',sans-serif;}
.policy-close:hover{color:var(--cream);}
.policy-body{font-size:.86rem;color:var(--text-dim);line-height:1.75;}
.policy-body h4{color:var(--cream);margin:1.1rem 0 .35rem;font-size:.9rem;font-weight:600;}
.policy-body p{margin-bottom:.65rem;}
.policy-body ul{padding-left:1.3rem;margin-bottom:.65rem;}
.policy-body li{margin-bottom:.3rem;}
#toast{position:fixed;bottom:1.8rem;left:50%;transform:translateX(-50%) translateY(80px);background:var(--card2);border:1px solid var(--border2);border-radius:10px;padding:.6rem 1.4rem;font-size:.88rem;color:var(--cream);z-index:400;transition:transform .3s;pointer-events:none;}
#toast.on{transform:translateX(-50%) translateY(0);}
footer{text-align:center;padding:1.5rem;font-size:.75rem;color:var(--text-dim);width:100%;border-top:1px solid var(--border);background:var(--bg);margin-top:auto;}
footer a{color:inherit;cursor:pointer;text-decoration:underline dotted;}
footer a:hover{color:var(--cream);}
::-moz-selection {
  background-color: var(--gold);
  color: var(--bg);
}
::selection {
  background-color: var(--gold);
  color: var(--bg);
}
footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  width: 100%;
}

.footer-copy, .footer-links {
  font-size: .75rem;
  color: var(--text-dim);
}

.footer-logo {
  font-family: 'Inter', sans-serif;
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--text-dim);
  letter-spacing: 0.18em;
  line-height: 1.1;
  cursor: pointer;
  user-select: none;
  transition: opacity .15s;
}

.footer-logo:hover {
  opacity: .7;
}

.footer-logo .light {
  font-weight: 300;
  letter-spacing: 0.14em;
}

@media (min-width: 900px) {
  footer {
    flex-direction: row;
    position: relative;
    padding: 1.5rem 2rem;
    height: 60px;
  }
  
  .footer-copy {
    position: absolute;
    left: 2rem;
  }
  
  .footer-links {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
  }
  
  .footer-logo {
    position: absolute;
    right: 2rem;
  }
}