/* Phone pages (controller.html + the games' phone UIs) in UI v2. Active under <html data-ui="2" data-phone>. Dark is the base; day gets stronger contrast. */
html[data-phone]{--seat:var(--l)}
html[data-phone][data-look=day]{--card-bd:rgba(70,35,190,.34);--mut:#4D4289;--card:linear-gradient(180deg,#FFFFFF,#F2ECFF);--dim:#DDD4FA;--dim-tx:#5F5496;--dis-bg:#D9D1F2;--dis-tx:#6B6199;--card-sh:0 10px 24px rgba(50,25,140,.2),0 2px 0 #fff inset}
html[data-phone][data-ui="2"] body{color:var(--tx);padding:18px 16px 120px;min-height:100vh;box-sizing:border-box}
html[data-phone][data-ui="2"] body.in-room{padding-top:76px;padding-bottom:104px}
/* join screen */
#join{display:flex;flex-direction:column;align-items:center;gap:6px}
#join .hero{width:min(72vw,270px);margin:0 auto}#join .hero svg{width:100%;height:auto;display:block;filter:drop-shadow(0 12px 14px rgba(10,5,40,.3))}
.tagline{margin:0 0 12px;font:800 clamp(18px,5vw,22px) var(--disp);color:var(--tx)}
.jc{width:100%;max-width:420px;padding:18px 18px 20px;text-align:right;display:flex;flex-direction:column;gap:10px}
.fld{display:flex;flex-direction:column;gap:6px}.fld span{font:700 14px Rubik,sans-serif;color:var(--mut);padding-inline:6px}
.jc input{font:800 clamp(24px,7vw,30px) var(--disp);text-align:center;border-radius:999px;padding:12px 16px;margin:0;width:100%;box-sizing:border-box}
#code{letter-spacing:.24em}
.jc .btn{font-size:24px;margin-top:4px}
#resume{background:var(--pill);color:var(--pill-tx);box-shadow:inset 0 0 0 1.5px var(--card-bd);font-size:18px}
/* header */
#hdr{position:fixed;top:0;inset-inline:0;z-index:30;display:flex;align-items:center;gap:10px;padding:10px 14px;height:56px;box-sizing:border-box;background:var(--bar);border-bottom:1.5px solid var(--card-bd);box-shadow:0 6px 18px rgba(10,5,40,.18)}
#hdr[hidden],#bar[hidden],#plist[hidden]{display:none}
#hdr .hl{height:34px;width:34px}#hgame{font:800 20px var(--disp);flex:1;text-align:start;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.seat{display:inline-flex;align-items:center;gap:6px;padding:3px 12px;border-radius:999px;background:var(--pill);color:var(--pill-tx);font:800 14px var(--disp)}.seat i{width:.9em;height:.9em;border-radius:50%;background:var(--pc);box-shadow:0 0 0 2px #fff,0 0 0 3px rgba(0,0,0,.35)}
.conn{display:inline-flex;align-items:center;gap:6px;font:700 12px Rubik,sans-serif;color:var(--mut)}.conn i{width:10px;height:10px;border-radius:50%;background:#43E08A;box-shadow:0 0 0 3px rgba(67,224,138,.25)}
.conn[data-st=reconnecting] i{background:#FFB020;box-shadow:0 0 0 3px rgba(255,176,32,.25)}.conn[data-st=lost] i{background:#FF5470;box-shadow:0 0 0 3px rgba(255,84,112,.25)}
/* bottom bar */
#bar{position:fixed;bottom:0;inset-inline:0;z-index:30;display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:8px;padding:8px 12px calc(8px + env(safe-area-inset-bottom));background:var(--bar);border-top:1.5px solid var(--card-bd);box-shadow:0 -6px 18px rgba(10,5,40,.18)}
#bar>*{display:flex;align-items:center;justify-content:center;gap:8px;height:50px;border-radius:999px;border:1.5px solid var(--card-bd);background:var(--pill);color:var(--pill-tx);font:800 14px var(--disp);cursor:pointer;padding:0 12px;white-space:nowrap;min-width:0;position:static;width:auto;box-shadow:none}
#bar b{overflow:hidden;text-overflow:ellipsis}#bar .bi{font-size:20px;line-height:1;flex:none}#bar em{font-style:normal;background:var(--act);color:#1B1440;border-radius:999px;padding:0 8px;margin-inline-start:4px}
#bst{cursor:default;background:var(--card);color:var(--tx)}#bst.mine{background:var(--act);color:#1B1440;box-shadow:var(--act-sh);border-color:transparent}
#plist{position:fixed;bottom:76px;inset-inline:14px;z-index:35;padding:10px 14px;text-align:right}
#plist .pl{display:flex;align-items:center;gap:10px;padding:8px 4px;font:800 18px var(--disp)}#plist .pl i{width:22px;height:22px;border-radius:50%;box-shadow:0 0 0 2px #fff,0 0 0 3px rgba(0,0,0,.3)}#plist .pl b{flex:1}#plist small{color:var(--mut);font-weight:700}
#lookb{position:fixed;bottom:14px;inset-inline-end:14px;z-index:30;width:46px;height:46px;border-radius:50%;border:1.5px solid var(--card-bd);background:var(--card);box-shadow:var(--card-sh);font-size:20px;line-height:1;cursor:pointer}
/* ---- Ludo phone */
html[data-ui="2"] #top{background:var(--card);border-radius:26px}
html[data-ui="2"] #st{background:var(--pill);color:var(--pill-tx);border:0}
html[data-ui="2"] #game.my #st{background:var(--act);color:#1B1440;transform:none;box-shadow:var(--act-sh)}
html[data-ui="2"] #die{filter:drop-shadow(0 10px 12px rgba(10,5,40,.3))}
html[data-ui="2"] #roll{font-size:30px;padding:18px}
html[data-ui="2"] #game.my #roll:not(:disabled){box-shadow:var(--act-sh),var(--g-lg)}
html[data-ui="2"] .pc{background:var(--card);border:1.5px solid var(--card-bd);box-shadow:var(--card-sh);border-radius:24px;opacity:1;color:var(--tx)}
html[data-ui="2"] .pc:disabled{background:var(--dim);color:var(--dim-tx);box-shadow:none}
html[data-ui="2"] .pc:not(:disabled){background:var(--act);color:#1B1440;border-color:transparent;box-shadow:var(--act-sh)}
html[data-ui="2"] .pc em{background:rgba(0,0,0,.14);border:0;height:8px}html[data-ui="2"] .pc u{background:var(--seat)}
html[data-ui="2"] .chip.card{border-radius:999px}
html[data-ui="2"] #lobby .logo{display:none}
html[data-ui="2"] #lobby #pl .chip{font:800 20px var(--disp)}
/* ---- Domino phone */
html[data-ui="2"] .t{filter:drop-shadow(0 8px 8px rgba(10,5,40,.35))}
html[data-ui="2"] .oc{border:1.5px solid var(--card-bd);box-shadow:none;background:var(--card);color:var(--tx)}
html[data-ui="2"] .oc.on{background:var(--act);color:#1B1440;box-shadow:var(--act-sh);border-color:transparent}
html[data-ui="2"] #ends{border-radius:22px}html[data-ui="2"] #ends b{border:0;background:var(--act);color:#1B1440;box-shadow:var(--act-sh)}
html[data-ui="2"] #ends #stock{border:0;background:var(--pill);color:var(--pill-tx)}
html[data-ui="2"] #cx{background:var(--pill);color:var(--pill-tx)}
html[data-ui="2"] #sides{background:rgba(20,12,60,.72)}
/* the bar keeps the room for the state line: sound and players are icon buttons */
#snd b,#plb b{font-size:0}#plb b em{font-size:14px}#snd,#plb{padding:0 14px;min-width:54px}
#bst{font-size:15px}

/* ---- landscape phone (skyline and any wide game): a slim header and the bar becomes a rail on the left, so the play area keeps its height ---- */
@media (orientation:landscape) and (max-height:520px){
  #hdr{height:40px;padding:4px 12px}
  #hdr .hl{height:26px;width:26px}#hgame{font-size:16px}
  #bar{inset-inline:auto;left:0;top:40px;bottom:0;width:60px;display:flex;flex-direction:column;align-items:center;gap:8px;padding:8px 6px;border-top:0;border-inline-end:1.5px solid var(--card-bd);box-shadow:6px 0 18px rgba(10,5,40,.18)}
  #bar>*{height:46px;width:46px;padding:0;border-radius:16px;flex:none}
  #bar b{font-size:0}#bar em{font-size:12px;margin:0}#bar #plb .bi{display:none}#bst b{display:none}
  #plist{bottom:auto;top:48px;left:68px;inset-inline:auto;max-width:280px}
  html[data-ui="2"] body :is(.dp,.bp,.rc,.jg,.sk){padding-top:calc(40px + env(safe-area-inset-top));padding-bottom:max(6px,env(safe-area-inset-bottom));padding-left:calc(60px + 8px)}
}