:root{
    --felt:#1e5b45; --felt-dark:#14432f;
    --wood:#3b2a1e; --wood-light:#5c4331;
    --bg:#17120e; --bg2:#221a13;
    --ivory:#f5efe0; --pip:#2b241c;
    --gold:#e0a93d; --gold-bright:#ffd66b;
    --text:#efe6d4; --dim:#9a8b74;
    --ok:#7fc98f;
  }
  *{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
  html,body{height:100%}
  body{
    background:var(--bg);
    color:var(--text);
    font-family:-apple-system,'Segoe UI',Roboto,sans-serif;
    display:flex;flex-direction:column;overflow:hidden;
  }
  #canvasWrap{position:relative;flex:0 0 44vh;min-height:260px;background:radial-gradient(ellipse at 50% 30%, #2a2015 0%, var(--bg) 75%)}
  #canvasWrap canvas{display:block;width:100%;height:100%}
  #fx{position:absolute;inset:0;pointer-events:none}
  #banner{
    position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    pointer-events:none;opacity:0;
  }
  #banner span{
    font-size:clamp(3rem,14vw,7rem);font-weight:900;letter-spacing:.06em;
    color:var(--gold-bright);
    text-shadow:0 0 24px rgba(224,169,61,.85),0 4px 0 #7a5716,0 6px 18px rgba(0,0,0,.6);
    transform:scale(.3) rotate(-6deg);
  }
  #banner.show{opacity:1;transition:opacity .15s}
  #banner.show span{animation:bannerPop .7s cubic-bezier(.2,1.6,.4,1) forwards}
  @keyframes bannerPop{to{transform:scale(1) rotate(-3deg)}}
  #hint{
    position:absolute;bottom:8px;left:0;right:0;text-align:center;
    font-size:.78rem;color:var(--dim);pointer-events:none;text-shadow:0 1px 2px #000;
  }
  #turnBadge{
    position:absolute;top:8px;left:10px;background:rgba(0,0,0,.45);
    border:1px solid rgba(224,169,61,.4);border-radius:20px;
    padding:4px 14px;font-size:.85rem;font-weight:600;color:var(--gold-bright);
    backdrop-filter:blur(3px);
  }
  #gearBtn{
    position:absolute;top:8px;right:10px;width:36px;height:36px;border-radius:50%;
    background:rgba(0,0,0,.45);border:1px solid rgba(224,169,61,.4);
    color:var(--gold);font-size:1.1rem;cursor:pointer;backdrop-filter:blur(3px);
  }
  #hint.nudge{color:var(--gold-bright);font-weight:700;animation:hintPulse 1s ease-in-out infinite}
  @keyframes hintPulse{50%{opacity:.5}}
  /* pikavalintachipit vihjetekstin paikalla */
  #quickPicks{
    position:absolute;bottom:6px;left:6px;right:6px;display:none;
    gap:6px;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;padding:9px 0 2px; /* tilaa yläviitteille */
  }
  #quickPicks::-webkit-scrollbar{display:none}
  #quickPicks.show{display:flex}
  /* keskitetty kun mahtuu, scrollaa kun ei */
  .qp:first-child{margin-left:auto}
  .qp:last-child{margin-right:auto}
  .qp{
    flex:0 0 auto;position:relative;
    background:rgba(20,15,9,.82);border:1px solid var(--gold);color:var(--gold-bright);
    border-radius:18px;padding:7px 13px;font-weight:700;font-size:.88rem;cursor:pointer;
    backdrop-filter:blur(3px);box-shadow:0 2px 8px rgba(0,0,0,.5);white-space:nowrap;
  }
  .qp .colSup{
    position:absolute;top:-7px;left:9px;
    font-size:.58rem;font-weight:800;letter-spacing:.05em;line-height:1;
    background:#171009;color:var(--gold);border:1px solid var(--gold);
    border-radius:6px;padding:1px 4px;
  }
  .qp:active{background:var(--gold);color:#241a08}
  .qp.blink{animation:qpBlink 1s ease-in-out infinite}
  @keyframes qpBlink{50%{box-shadow:0 0 16px rgba(255,214,107,.95);border-color:var(--gold-bright);background:rgba(224,169,61,.35)}}
  @media (prefers-reduced-motion: reduce){.qp.blink{animation:none;border-color:var(--gold-bright)}}
  #shakePrompt{
    position:absolute;inset:0;display:none;flex-direction:column;gap:10px;
    align-items:center;justify-content:center;cursor:pointer;
    background:rgba(12,9,6,.6);backdrop-filter:blur(2px);z-index:5;
  }
  #shakePrompt.show{display:flex}
  #shakePrompt .cup{font-size:4.2rem;animation:cupShake .45s ease-in-out infinite}
  @keyframes cupShake{0%,100%{transform:rotate(-16deg) translateX(-6px)}50%{transform:rotate(16deg) translateX(6px)}}
  #shakePrompt .txt{
    font-size:1.5rem;font-weight:900;letter-spacing:.06em;color:var(--gold-bright);
    text-shadow:0 0 16px rgba(224,169,61,.7),0 2px 4px #000;
  }
  #shakePrompt .sub2{color:var(--dim);font-size:.85rem}
  @media (prefers-reduced-motion: reduce){#shakePrompt .cup{animation:none}}
  .setRow{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:13px 2px;border-bottom:1px solid #2c2318;text-align:left;
  }
  .setRow .lbl{font-size:.98rem}
  .setRow .lbl small{display:block;color:var(--dim);font-size:.75rem;margin-top:2px}
  .switch{
    flex:0 0 52px;height:30px;border-radius:15px;border:1px solid var(--wood-light);
    background:#171009;position:relative;cursor:pointer;transition:background .2s;
  }
  .switch::after{
    content:'';position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;
    background:var(--dim);transition:left .2s, background .2s;
  }
  .switch.on{background:var(--felt)}
  .switch.on::after{left:25px;background:var(--gold-bright)}
  #motionStatus{color:var(--dim);font-size:.78rem;margin-top:10px;min-height:1em}
  #controls{
    display:flex;align-items:center;gap:10px;padding:10px 12px;
    background:linear-gradient(180deg,var(--bg2),var(--bg));
    border-top:2px solid var(--wood);border-bottom:2px solid var(--wood);
  }
  #rollBtn{
    flex:1;padding:13px;font-size:1.15rem;font-weight:800;letter-spacing:.03em;
    color:#241a08;background:linear-gradient(180deg,var(--gold-bright),var(--gold));
    border:none;border-radius:12px;cursor:pointer;
    box-shadow:0 3px 0 #8a6516,0 6px 14px rgba(0,0,0,.5);
    transition:transform .08s, box-shadow .08s, filter .2s;
    user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:manipulation;
  }
  #rollBtn.charging{
    background:linear-gradient(180deg,#fff2c8,var(--gold-bright));
    animation:chargeGlow .5s ease-in-out infinite;
  }
  @keyframes chargeGlow{50%{box-shadow:0 3px 0 #8a6516,0 0 22px rgba(255,214,107,.8)}}
  #rollBtn:active{transform:translateY(2px);box-shadow:0 1px 0 #8a6516}
  #rollBtn:disabled{filter:grayscale(.8) brightness(.6);cursor:default}
  #rollsLeft{display:flex;gap:6px}
  .rollDot{width:12px;height:12px;border-radius:50%;background:var(--gold);box-shadow:0 0 6px rgba(224,169,61,.6)}
  .rollDot.used{background:#3a3128;box-shadow:none}
  #board{flex:1;overflow-y:auto;padding:0 8px 20px;overscroll-behavior:contain}
  table{width:100%;border-collapse:collapse;font-size:.9rem}
  th,td{padding:7px 8px;border-bottom:1px solid #2c2318;text-align:center}
  th:first-child,td:first-child{text-align:left;color:var(--dim);font-weight:500;white-space:nowrap}
  thead th{color:var(--gold);font-weight:700;position:sticky;top:0;background:var(--bg);z-index:2}
  thead tr:first-child th{height:38px}
  thead th.cur{color:var(--gold-bright);text-shadow:0 0 8px rgba(255,214,107,.5)}
  thead th.colHead{
    font-size:.72rem;color:var(--dim);padding:2px 4px;height:22px;
    top:37px;background:var(--bg);z-index:2; /* 1px limitys nimiriviin — ei rakoa */
  }
  thead th.colHead.cur{color:var(--gold-bright)}
  td.filled{color:var(--text);font-weight:600}
  td.zero{color:#6b5c48}
  td.avail{color:var(--gold);font-weight:700;cursor:pointer;border-radius:6px;animation:availPulse 1.4s ease-in-out infinite}
  td.avail:active{background:rgba(224,169,61,.35)}
  @keyframes availPulse{
    0%,100%{background:rgba(224,169,61,.08);box-shadow:inset 0 0 0 1px rgba(224,169,61,.2)}
    50%{background:rgba(224,169,61,.3);box-shadow:inset 0 0 0 1px rgba(255,214,107,.65)}
  }
  /* kuuma valinta: iso pistesaalis hehkuu kirkkaimmin ja nopeimmin */
  td.avail.hot{color:var(--gold-bright);animation:availHotPulse 1.4s ease-in-out infinite}
  @keyframes availHotPulse{
    0%,100%{background:rgba(255,214,107,.16);box-shadow:inset 0 0 0 1px rgba(255,214,107,.4),0 0 8px rgba(255,214,107,.25)}
    50%{background:rgba(255,214,107,.45);box-shadow:inset 0 0 0 1px rgba(255,214,107,.95),0 0 16px rgba(255,214,107,.55)}
  }
  /* nolla/miinusvalinta: selvästi näkyvä mutta himmeämpi pulssi */
  td.availzero{color:#8a7a62;cursor:pointer;animation:availZeroPulse 1.4s ease-in-out infinite;border-radius:6px}
  td.availzero:active{background:rgba(255,255,255,.12)}
  @keyframes availZeroPulse{
    0%,100%{background:rgba(154,139,116,.05);box-shadow:inset 0 0 0 1px rgba(154,139,116,.2)}
    50%{background:rgba(154,139,116,.18);box-shadow:inset 0 0 0 1px rgba(154,139,116,.5)}
  }
  @media (prefers-reduced-motion: reduce){
    td.avail{animation:none;background:rgba(224,169,61,.2)}
    td.avail.hot{animation:none;background:rgba(255,214,107,.35)}
    td.availzero{animation:none;background:rgba(154,139,116,.12);box-shadow:inset 0 0 0 1px rgba(154,139,116,.35)}
  }
  #undoBtn{
    display:none;padding:11px 14px;font-size:1.2rem;border-radius:12px;cursor:pointer;
    background:#2b2015;color:var(--gold);border:1px solid var(--wood-light);
    box-shadow:0 2px 0 #120d08;
  }
  #undoBtn.show{display:block}
  #undoBtn:active{transform:translateY(1px)}
  #newBtn{
    padding:11px 14px;font-size:1.1rem;border-radius:12px;cursor:pointer;
    background:#2b2015;color:var(--dim);border:1px solid var(--wood-light);
    box-shadow:0 2px 0 #120d08;white-space:nowrap;
  }
  #newBtn:active{transform:translateY(1px)}
  #newBtn.confirm{color:#241a08;background:var(--gold);border-color:var(--gold-bright);font-weight:700;font-size:.85rem}
  #cancelStart{
    display:none;margin-top:12px;background:none;border:none;cursor:pointer;
    color:var(--dim);font-size:.9rem;text-decoration:underline;
  }
  #cancelStart.show{display:inline-block}
  /* yläpalkin pelaajakohtaiset näkymänapit */
  .hdrBtns{display:flex;gap:5px}
  .hdrBtn{
    width:30px;height:30px;border-radius:8px;cursor:pointer;font-size:.95rem;
    background:#241b11;color:var(--dim);border:1px solid var(--wood);padding:0;
  }
  .hdrBtn.on{color:#241a08;background:var(--gold);border-color:var(--gold-bright)}
  /* 🙈: kokonaan käytetty rivi poistetaan (tilaa!), osittain käytetty solu himmennetään */
  td.fadeUsed{opacity:.32}
  .ug.fadeUsed{opacity:.32}
  /* kompakti yläkerta (omat sarakkeet -tila): 6 solun ruudukko koko leveydellä */
  td.ucWrap{padding:6px 4px;text-align:left}
  .ucColTag{color:var(--dim);font-size:.72rem;font-weight:700;margin:4px 0 2px 2px;letter-spacing:.08em}
  .ucGrid{display:grid;grid-template-columns:repeat(6,1fr);gap:5px;margin:2px 0}
  .ug{
    border:1px solid var(--wood-light);border-radius:9px;
    min-height:38px;display:flex;align-items:center;justify-content:center;gap:3px;
    font-size:.95rem;font-weight:700;color:var(--text);
    background:rgba(255,255,255,.02);
  }
  .ug .n{color:#7a6a52;font-size:.72rem;font-weight:600}
  .ug.dim{color:#5f5140}
  .ug.avail{color:var(--gold);cursor:pointer;animation:availPulse 1.4s ease-in-out infinite}
  .ug.avail.hot{color:var(--gold-bright);animation:availHotPulse 1.4s ease-in-out infinite}
  .ug.availzero{color:#8a7a62;cursor:pointer;animation:availZeroPulse 1.4s ease-in-out infinite}
  tr.allTot td{color:var(--dim);font-weight:600;text-align:left;padding-left:12px}
  tr.allTot td b{color:var(--gold)}
  tr.section td,tr.section th{background:#201810;color:var(--gold);font-weight:700;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;border-bottom:1px solid var(--wood)}
  tr.bonusRow td,tr.sumRow td{color:var(--ok);font-weight:700;background:rgba(127,201,143,.05)}
  .devTag{font-size:.82em;font-weight:700;margin-left:3px}
  .devTag.pos{color:var(--ok)}
  .devTag.neg{color:#d98b7f}
  tr.totalRow td{font-weight:800;color:var(--gold-bright);font-size:1rem;background:rgba(224,169,61,.07)}
  td.justScored{animation:cellFlash 1s ease-out}
  @keyframes cellFlash{0%{background:rgba(255,214,107,.7);color:#241a08}100%{background:transparent}}
  .popScore{
    position:absolute;font-weight:900;color:var(--gold-bright);pointer-events:none;
    text-shadow:0 0 10px rgba(224,169,61,.9),0 2px 4px #000;
    animation:popUp 1.4s ease-out forwards;z-index:50;font-size:2rem;
  }
  @keyframes popUp{0%{opacity:0;transform:translateY(10px) scale(.6)}15%{opacity:1;transform:translateY(0) scale(1.15)}30%{transform:scale(1)}100%{opacity:0;transform:translateY(-70px)}}
  /* overlays */
  .overlay{
    position:fixed;inset:0;background:rgba(12,9,6,.9);z-index:100;
    display:flex;align-items:center;justify-content:center;padding:20px;
  }
  .panel{
    background:linear-gradient(180deg,#2b2015,#1c150e);
    border:2px solid var(--wood-light);border-radius:18px;
    padding:26px 24px;max-width:360px;width:100%;text-align:center;
    box-shadow:0 20px 60px rgba(0,0,0,.7);
    max-height:88vh;max-height:88dvh;overflow-y:auto;
    overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  }
  .panel h1{font-size:2.4rem;letter-spacing:.12em;color:var(--gold-bright);margin-bottom:2px;text-shadow:0 0 18px rgba(224,169,61,.5)}
  .panel .sub{color:var(--dim);font-size:.85rem;margin-bottom:20px}
  .panel label{display:block;color:var(--dim);font-size:.8rem;margin:14px 0 6px;text-transform:uppercase;letter-spacing:.08em}
  .segs{display:flex;gap:8px;justify-content:center}
  .segs button{
    flex:1;padding:10px 0;font-size:1.1rem;font-weight:700;border-radius:10px;cursor:pointer;
    background:#171009;color:var(--dim);border:1px solid var(--wood);
  }
  .segs button.on{background:var(--gold);color:#241a08;border-color:var(--gold-bright)}
  #nameInputs input{
    width:100%;margin-top:8px;padding:10px 12px;border-radius:10px;font-size:1rem;
    background:#120d08;color:var(--text);border:1px solid var(--wood);
  }
  .swatches{display:flex;gap:9px;margin:8px 0 4px;justify-content:center}
  .sw{
    width:28px;height:28px;border-radius:50%;cursor:pointer;
    border:2px solid rgba(255,255,255,.15);box-shadow:inset 0 -4px 6px rgba(0,0,0,.35);
    transition:transform .1s;
  }
  .sw.on{border-color:var(--gold-bright);transform:scale(1.18);box-shadow:0 0 10px rgba(255,214,107,.6),inset 0 -4px 6px rgba(0,0,0,.35)}
  .pdot{
    display:inline-block;width:11px;height:11px;border-radius:50%;
    margin-right:5px;vertical-align:baseline;
    border:1px solid rgba(0,0,0,.4);box-shadow:0 0 4px rgba(0,0,0,.5);
  }
  .bigBtn{
    margin-top:22px;width:100%;padding:14px;font-size:1.15rem;font-weight:800;
    color:#241a08;background:linear-gradient(180deg,var(--gold-bright),var(--gold));
    border:none;border-radius:12px;cursor:pointer;box-shadow:0 3px 0 #8a6516;
  }
  #winnerPanel h1{font-size:1.9rem}
  #closeWin{
    position:absolute;top:10px;right:12px;width:34px;height:34px;border-radius:50%;
    background:#171009;color:var(--dim);border:1px solid var(--wood-light);
    font-size:1rem;cursor:pointer;
  }
  #closeWin:active{background:var(--wood)}
  #resumeBtn.show{display:block !important}
  #winnerName{font-size:2.2rem;font-weight:900;color:var(--gold-bright);margin:10px 0 4px}
  #winnerScore{color:var(--ok);font-size:1.2rem;font-weight:700;margin-bottom:8px}
  #finalList{margin:14px 0;color:var(--dim);font-size:.95rem;line-height:1.7}
  @media (prefers-reduced-motion: reduce){
    #banner.show span{animation:none;transform:scale(1)}
    .popScore{animation-duration:.6s}
  }