/* Love Arcade: UX edition. Focused flows, familiar room conventions, high-clarity feedback. */
:root{--ux-surface:#20192e;--ux-subtle:#2d253b;--ux-rose:#ff9fc8;--ux-lime:#a5f0c8}
body{background:radial-gradient(ellipse at 70% -15%,#55315866,transparent 48%),radial-gradient(ellipse at 0 90%,#27324c55,transparent 60%),#0f0d19}
.topbar{position:relative;z-index:2}.brandmark{box-shadow:0 0 18px #ff8fc22c}
.welcome-steps{display:flex;align-items:center;gap:8px;margin:29px 0 5px;max-width:475px}
.welcome-steps>div:not(.step-connector){display:flex;align-items:center;gap:8px;white-space:nowrap}
.welcome-steps b{display:grid;place-items:center;flex-shrink:0;width:31px;height:31px;border:1px solid #ffacd84c;border-radius:10px;color:#ffd0e5;background:#ffb3d013;font:11px monospace}
.welcome-steps span{color:#e3ccdf;font-size:11px}.step-connector{height:1px;flex:1;background:linear-gradient(90deg,#ffb4cf7a,#a7a2e175)}
.entry{position:relative;overflow:hidden}.entry:before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,#ffcfad,#e28cc7,#8f8af7)}.entry input{min-height:51px}.entry .primary{min-height:52px}
.room-guide{display:flex;align-items:center;gap:15px;margin:15px 0;border-radius:17px;padding:17px 20px;background:linear-gradient(110deg,#382a45,#251d34);border:1px solid #b39abf3e;box-shadow:0 12px 32px #10091e2f}
.guide-icon{flex:none;display:grid;place-items:center;width:51px;height:51px;border-radius:15px;background:#fca7cc21;border:1px solid #ffb5d650;color:#ffb8db;font-size:28px}
.guide-content{min-width:0;flex:1}.guide-content .eyebrow{font-size:9px;color:#e0b8d4}.guide-content h3{font-size:16px;line-height:1.35;margin:5px 0;color:#f6e3f2;font-weight:700}
.guide-content p{font-size:11px;line-height:1.6;margin:4px 0 0;color:#c9b3d4}
.guide-action{flex:none;white-space:nowrap;min-height:44px}
.room-guide.is-ready{background:linear-gradient(105deg,#223d3b,#222b3b);border-color:#9aefd348}.room-guide.is-ready .guide-icon{color:#abf2d4;border-color:#8ceac44d;background:#8ceac415}
.players{transition:border-color .22s,background .22s}.players:has(#theirstatus.is-online){border-color:#8aeec43b}
.player small.is-online{color:#9feac7}.player small.is-away{color:#eec78b}.player small.is-offline{color:#bdb0c5}
.gamecard{display:flex;flex-direction:column;justify-content:flex-start;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;isolation:isolate;min-width:0}
.gamecard:before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:radial-gradient(circle at 84% 8%,#ffffff1d,transparent 42%);opacity:.9}
.gamecard .art{font-size:56px;line-height:1.2}.gamecard .tagline,.gamecard h3,.gamecard p,.gamecard .art,.gamecard .arrow{position:relative;z-index:1}
.gamecard:focus-visible,.choice:focus-visible,.memorycard:focus-visible{outline:3px solid #ffe3f0;outline-offset:3px}
.game-head-center{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:9px}.game-name{color:#dbc7dd;font-size:12px;font-weight:600}
.game-status{display:flex;align-items:center;gap:13px;min-height:58px;border:1px solid #c7a1cb38;border-radius:14px;padding:12px 16px;background:linear-gradient(120deg,#292039,#22192e);margin:0 auto 15px;max-width:800px}
.game-status:empty{display:none}.status-symbol{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:10px;background:#e5a5cc1e;color:#ffd0e6;font-size:19px}
.status-copy{min-width:0;flex:1}.status-copy b{display:block;font-size:12px;color:#f2dff1}.status-copy small{display:block;color:#bba9c9;font-size:10px;line-height:1.55}
.status-count{font:11px monospace;color:#dbbee0;white-space:nowrap}
.game-surface{box-shadow:inset 0 1px 0 #ffffff10,0 15px 48px #0002}.game-surface .primary,.game-surface .secondary{min-height:48px}
.steps span.active{font-weight:bold}.waiting{position:relative;padding:25px;border-style:solid;background:#ffffff04}
.waiting:before{content:"";display:block;margin:0 auto 13px;width:29px;height:29px;border:2px solid #e6a3c247;border-top-color:#ffabd3;border-radius:50%;animation:ux-spin 1.25s linear infinite}
@keyframes ux-spin{to{transform:rotate(360deg)}}
.choice{transition:transform .16s,box-shadow .16s,border-color .16s;display:block;overflow-wrap:anywhere}
.choice:hover:not(:disabled){transform:translateY(-2px);border-color:#ffd2e4b0;box-shadow:0 12px 26px #0003}
.memorycard{transition:transform .2s,background .2s;border-radius:15px}
.memorycard.revealed{transform:scale(.97);box-shadow:inset 0 2px 12px #d268982a}
.turnchip{font-weight:650}.feedback{display:flex;align-items:center;gap:9px}
.feedback:before{content:"✦";font-size:19px}
.dock{border-color:#9c82ab54;box-shadow:0 14px 65px #000b,0 0 0 1px #ffffff08}
.dockbtn{transition:transform .13s,background .13s;border-radius:13px}
.dockbtn:focus-visible{outline:2px solid #ffe0eb;outline-offset:3px}
.dockbtn[aria-pressed="true"]{background:#ff9fcb2d;border-color:#ffa2cb87}
.dockbtn:not(:disabled):active{transform:scale(.95)}
.dockbtn.chatbutton{box-shadow:0 4px 15px #ffb4d022}
.chat-backdrop{position:fixed;inset:0;background:#0806119c;backdrop-filter:blur(3px);z-index:34;cursor:default}
.chatpanel{z-index:35;box-shadow:0 22px 80px #000c}
.bubble{animation:bubble-in .18s ease-out;line-height:1.55}
@keyframes bubble-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
.bubble.mine{border:1px solid #ffa2cc38}.bubble:not(.mine){border:1px solid #ffffff13}
.chatpanel form input{min-height:48px}.chatpanel form button{min-width:48px}
.celebration{position:fixed;inset:0;z-index:75;pointer-events:none;overflow:hidden}
.celebration .burst{position:absolute;left:50%;top:43%;font-size:28px;animation:heart-float .95s ease-out forwards;will-change:transform,opacity}
@keyframes heart-float{0%{transform:translate(0,0) scale(.7);opacity:0}20%{opacity:1}100%{transform:translate(var(--x),var(--y)) rotate(var(--r)) scale(1.15);opacity:0}}
@media(max-width:760px){.room-guide{flex-wrap:wrap;gap:11px}.guide-action{margin-left:66px}.welcome-steps{max-width:100%}.game-name{display:none}}
@media(max-width:580px){
 .welcome-steps{gap:6px;margin-top:20px}.welcome-steps>div:not(.step-connector){flex-direction:column;gap:5px;text-align:center;flex:1;white-space:normal}
 .welcome-steps b{width:30px;height:30px}.welcome-steps span{font-size:9px;line-height:1.3}.step-connector{flex:0 0 12px;align-self:flex-start;margin-top:15px}
 .room-guide{padding:13px 14px;border-radius:14px;margin:12px 0}.guide-icon{height:39px;width:39px;font-size:24px;border-radius:12px}.guide-content h3{font-size:13px}.guide-content p{font-size:10px}
 .guide-action{width:100%;margin-left:0;min-height:43px;font-size:11px}.game-status{margin-bottom:11px;min-height:55px;padding:10px 12px}.status-symbol{height:32px;width:32px}.status-copy b{font-size:11px}.status-copy small{font-size:9px}.status-count{font-size:9px}
 .gamecard .art{font-size:42px}.game-surface{min-height:365px}.game-head-center{gap:5px}
 .chatpanel{bottom:max(130px,calc(env(safe-area-inset-bottom) + 117px))}.chat-backdrop{background:#080611ac}
}
@media(prefers-reduced-motion:reduce){.waiting:before,.bubble,.celebration .burst{animation:none!important}.gamecard,.choice,.memorycard,.dockbtn{transition:none!important}}

/* Clear accessible presence colors: connected is green, disconnected red. */
.players .presence-label{display:block;font-size:10px;font-weight:650}
.players .presence-label.is-online{color:#62e6a5}
.players .presence-label.is-offline{color:#ff758e}
.players .presence-label.is-waiting{color:#e6c176}
.players:has(#theirstatus.is-offline){border-color:#ff758e45}
.players:has(#theirstatus.is-online){border-color:#62e6a545}
#mic:not(:disabled)[aria-pressed="true"]{background:#ff9aad30;border-color:#ff92b8;color:#ffe0ed}
#mic:not(:disabled)[aria-pressed="false"]{color:#92f0c5}
#hangup:not(:disabled){opacity:1;color:#ff8ea5;border-color:#ff8ea545}