/* ── rummy (shell + HUD come from games.css) ── */
.sg{--tw:60px}
.rm-stage{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;gap:clamp(8px,.7vw,14px);padding:0 clamp(12px,1.6vw,32px) clamp(12px,1.4vw,28px)}
.sg-tools #rmHint{position:relative}
.sg-tools #rmHint i{position:absolute;top:-4px;left:-4px;min-width:20px;height:20px;border-radius:10px;background:var(--sun);color:var(--ink);font-style:normal;font-weight:700;font-size:12px;display:grid;place-items:center}
.sg-tools #rmHint:disabled{opacity:.45;pointer-events:none}
.sg-tools #rmHelp{font-family:Anomalia,Ploni,sans-serif;font-size:20px;line-height:1}

/* Skoli and the pile */
.rm-top{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:clamp(44px,3.6vw,60px)}
.rm-bot,.rm-pool{display:flex;align-items:center;gap:10px;min-width:0}
.rm-bot .face{flex:none;width:clamp(44px,3.6vw,60px);aspect-ratio:1;border-radius:50%;background:#fff;overflow:hidden;transition:scale .4s cubic-bezier(.34,1.56,.64,1)}
.rm-bot .face img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0}
.rm-bot.think .face{animation:rmThink 1.1s ease-in-out infinite}
@keyframes rmThink{50%{scale:1.07}}
.rm-top .tx{display:flex;align-items:baseline;gap:6px;white-space:nowrap}
.rm-top .tx b{font-family:Anomalia,Ploni,sans-serif;font-weight:400;font-size:clamp(22px,1.8vw,34px);line-height:1;color:var(--sun)}
.rm-top .tx small{font-size:clamp(13px,.9vw,16px);font-weight:600;color:rgba(255,255,255,.75)}
.rm-bot .say{min-width:0;padding:6px 16px;border-radius:999px;background:#fff;color:var(--ink);font-weight:600;font-size:clamp(14px,1vw,18px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .3s}
.rm-bot .say:empty{opacity:0}
.rm-pool .back{flex:none;display:block;width:clamp(30px,2.4vw,40px);aspect-ratio:3/3.9;border-radius:7px;background:var(--sun);border:3px solid #fff}

/* the table */
.rm-table{flex:1;min-height:0;display:flex;flex-wrap:wrap;align-content:flex-start;gap:calc(var(--tw) * .24);padding:calc(var(--tw) * .24);border-radius:clamp(18px,1.6vw,28px);background:rgba(255,255,255,.08)}
.rm-table.scroll{overflow-y:auto}
.rm-set{display:flex;gap:calc(var(--tw) * .06);padding:calc(var(--tw) * .07);border-radius:calc(var(--tw) * .24);background:rgba(255,255,255,.12);outline:2px solid transparent;outline-offset:-2px;transition:background .25s,outline-color .25s}
.rm-set.part{background:rgba(255,255,255,.06);outline:2px dashed rgba(255,255,255,.55)}
.rm-set.bad{background:rgba(247,72,8,.22);outline:2px dashed var(--flame)}
.rm-set.hover,.rm-new.hover{outline:3px solid var(--sun);background:rgba(239,215,11,.18)}
.rm-pick .rm-set,.rm-pick .rm-new{cursor:pointer}
.rm-new{min-width:calc(var(--tw) * 2.2);height:calc(var(--tw) * 1.44);padding:0 12px;border:0;border-radius:calc(var(--tw) * .24);background:none;outline:2px dashed rgba(255,255,255,.35);outline-offset:-2px;color:rgba(255,255,255,.7);font:600 clamp(13px,calc(var(--tw) * .27),18px)/1.1 Ploni,sans-serif;cursor:pointer;transition:background .25s,outline-color .25s,color .25s}
.rm-new:hover{color:#fff;outline-color:rgba(255,255,255,.7)}
.rm-table.empty .rm-new{flex:1;height:100%;min-height:calc(var(--tw) * 1.44);font-size:clamp(17px,1.3vw,24px)}

/* the buttons between the table and the rack */
.rm-bar{flex:none;display:flex;align-items:center;gap:8px}
.rm-sort{flex:none;display:flex;align-items:center;gap:10px}
.rm-sort > span{color:rgba(255,255,255,.75);font:600 clamp(14px,1vw,18px)/1 Ploni,sans-serif;white-space:nowrap}
.rm-sort .seg{display:flex;gap:2px;padding:3px;border-radius:999px;background:rgba(255,255,255,.14)}
.rm-sort .seg button{height:clamp(34px,calc(3vw - 6px),44px);padding:0 clamp(12px,1.05vw,20px);border:0;border-radius:999px;background:none;color:#fff;font:600 clamp(14px,1vw,18px)/1 Ploni,sans-serif;white-space:nowrap;cursor:pointer;transition:background .25s,color .25s}
.rm-sort .seg button:hover{background:rgba(255,255,255,.14)}
.rm-sort .seg button.on{background:#fff;color:var(--blue)}
.rm-now{flex:1;min-width:0;margin:0;padding:0 8px;text-align:center;color:#fff;font:600 clamp(14px,1vw,18px)/1.2 Ploni,sans-serif}
.rm-b{height:clamp(40px,3vw,50px);padding:0 clamp(14px,1.3vw,24px);border-radius:999px;border:1.5px solid rgba(255,255,255,.3);background:none;color:#fff;font:600 clamp(14px,1.05vw,19px)/1 Ploni,sans-serif;white-space:nowrap;cursor:pointer;transition:background .25s,color .25s,opacity .25s,border-color .25s}
.rm-b:hover{background:rgba(255,255,255,.14)}
.rm-b.main{background:#fff;border-color:#fff;color:var(--blue)}
.rm-b.main:hover{background:var(--sky);border-color:var(--sky)}
.rm-b.sun{background:var(--sun);border-color:var(--sun);color:var(--ink)}
.rm-b.sun:hover{background:#fff;border-color:#fff}
.rm-b:disabled,.rm-b.main:disabled,.rm-b.sun:disabled{background:none;border-color:rgba(255,255,255,.2);color:rgba(255,255,255,.45);pointer-events:none}
.rm-b[hidden]{display:none}
@media (max-width:1080px){
  .rm-now{visibility:hidden;padding:0}
}
@media (max-width:900px){
  .rm-sort > span{display:none}
}

/* the rack */
.rm-rack{flex:none;display:flex;flex-wrap:wrap;justify-content:center;align-content:center;gap:calc(var(--tw) * .08);min-height:calc(var(--tw) * 1.3 + var(--tw) * .36);padding:calc(var(--tw) * .18);border-radius:clamp(18px,1.6vw,28px);background:rgba(255,255,255,.16);outline:3px solid transparent;outline-offset:-3px;transition:outline-color .25s}
.rm-rack.hover{outline-color:var(--sun)}

/* a tile: a white frame around one flat brand colour, so the number reads from far away */
.ti{position:relative;flex:none;display:block;width:var(--tw);height:calc(var(--tw) * 1.3);padding:calc(var(--tw) * .055);border:0;border-radius:calc(var(--tw) * .16);background:#fff;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;outline:0 solid var(--sun);transition:translate .25s cubic-bezier(.2,.7,.2,1),outline-width .2s}
.ti .f{display:grid;place-items:center;width:100%;height:100%;border-radius:calc(var(--tw) * .11);background:var(--c);color:var(--d);overflow:hidden}
.ti b{translate:0 -.05em;direction:ltr;font-family:Anomalia,Ploni,sans-serif;font-weight:400;font-size:calc(var(--tw) * .62);line-height:1;pointer-events:none}
.ti.joker .f{background:#fff;align-items:end}
.ti.joker img{display:block;width:112%;max-width:none;pointer-events:none}
.rm-rack .ti:hover,.rm-table .ti:hover{translate:0 -3px}
.ti.sel,.rm-rack .ti.sel:hover,.rm-table .ti.sel:hover{translate:0 calc(var(--tw) * -.14);outline-width:3px}
.ti.fresh{outline-width:3px}
.ti.hint{animation:rmHintT 1s ease-in-out 4}
@keyframes rmHintT{50%{translate:0 calc(var(--tw) * -.16);outline-width:4px}}
.ti.ghost{visibility:hidden}
.ti:focus-visible{outline-width:3px}
.ti.locked{cursor:default}
.rm-drag{position:fixed;left:0;top:0;z-index:30;pointer-events:none;cursor:grabbing;scale:1.08;transition:scale .2s}
.rm-busy .ti{cursor:default}

/* the popups */
#rmClockBox b{transition:color .3s}
#rmClockBox.low b{color:var(--flame)}
.rm-left{display:flex;flex-direction:column;align-items:center;gap:6px;width:100%}
.rm-left small{font-size:14px;font-weight:600;color:var(--mute)}
.rm-eg.wide{--tw:clamp(26px,2.2vw,34px);flex-wrap:wrap;width:auto;max-width:100%}
.rm-link{border:0;background:none;color:var(--blue);font:600 16px/1.4 Ploni,sans-serif;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.rm-help{width:min(640px,100%)}
.rm-help ul{list-style:none;display:flex;flex-direction:column;gap:12px;width:100%;margin:0;padding:0;text-align:right}
.rm-help li{display:flex;align-items:center;gap:14px;font-size:clamp(15px,1.05vw,18px);line-height:1.35;color:var(--ink)}
.rm-eg{--tw:34px;flex:none;display:flex;justify-content:center;gap:3px;width:128px;padding:5px;border-radius:12px;background:var(--hero-mid)}
.rm-eg .ti{cursor:default}
.rm-help p{font-size:clamp(15px,1vw,17px)}

@media (max-width:720px){
  .rm-stage{padding:0 8px 8px;gap:6px}
  .rm-top{min-height:40px}
  .rm-bot .face{width:40px}
  .rm-bot .say{padding:4px 10px;font-size:13px}
  .rm-pool .tx small{display:none}
  .rm-top .tx small{font-size:12px}
  .rm-bot .tx small{display:none}
  .rm-bar{flex-wrap:wrap;gap:6px}
  .rm-now{display:none}
  .rm-sort{flex:1}
  .rm-sort .seg{flex:1}
  .rm-sort .seg button{flex:1;height:32px;padding:0 4px}
  .rm-b{height:38px;padding:0 8px;font-size:14px}
  #rmUndo{flex:none;padding:0 12px}
  .rm-b.main,.rm-b.sun{flex:1 1 40%}
  .rm-table{border-radius:16px}
  .rm-rack{border-radius:16px}
  .sg-stats small{font-size:12px}
  .sg-modes .sg-lv small{font-size:12px}
  .rm-eg{--tw:28px;width:106px}
}
@media (prefers-reduced-motion:reduce){
  .rm-bot.think .face,.ti.hint{animation:none}
}