:root { --st-ink:#17221d; --st-paper:#f3ead4; --st-green:#1e6651; --st-gold:#d9ad4d; --st-red:#a9433a; }
.st-shell { width:100%; min-height:680px; color:var(--st-ink); overflow:hidden; border:1px solid rgba(34,62,49,.25); border-radius:16px; background:radial-gradient(circle at 50% 0,rgba(255,255,255,.78),transparent 35%),linear-gradient(145deg,#edf1dc,#dbcba9); box-shadow:inset 0 0 60px rgba(40,75,58,.1); font-family:"Yu Mincho","Hiragino Mincho ProN",serif; }
.st-topbar { min-height:66px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 16px; color:#fff; background:linear-gradient(110deg,#153f35,#286a57); border-bottom:3px solid var(--st-gold); }
.st-brand { display:flex; align-items:center; gap:11px; }.st-brand-mark { width:42px; height:42px; display:grid; place-items:center; border:1px solid #e8cb80; border-radius:50%; color:#f3d889; background:rgba(0,0,0,.18); font-size:1.45rem; }.st-brand strong { display:block; letter-spacing:.08em; }.st-brand small { display:block; opacity:.72; font:600 .65rem/1.2 system-ui,sans-serif; letter-spacing:.15em; }
.st-mode-tabs { display:flex; gap:5px; padding:4px; border:1px solid rgba(255,255,255,.22); border-radius:11px; background:rgba(0,0,0,.14); }.st-mode-tabs button { min-height:37px; padding:7px 12px; border:0; border-radius:8px; color:#e8f3ec; background:transparent; font-weight:800; cursor:pointer; }.st-mode-tabs button.is-active { color:#183d34; background:#f8e8bd; box-shadow:0 2px 8px rgba(0,0,0,.2); }
.st-hidden { display:none!important; }.st-panel { padding:13px; border:1px solid rgba(55,71,46,.2); border-radius:11px; background:rgba(255,250,232,.82); box-shadow:0 7px 18px rgba(44,57,35,.08); }.st-panel h2,.st-panel h3 { margin:0 0 9px; }.st-primary,.st-panel button,.st-lobby button { min-height:40px; border:0; border-radius:8px; padding:8px 12px; color:#fff; background:#28624f; font-weight:800; cursor:pointer; }.st-subtle { color:#506157!important; background:#e4dbc4!important; }.st-toast { position:fixed; z-index:1000; left:50%; bottom:22px; transform:translateX(-50%); max-width:min(90vw,520px); padding:11px 16px; border-radius:9px; color:#fff; background:#a43c34; box-shadow:0 8px 25px rgba(0,0,0,.28); font:700 .82rem system-ui,sans-serif; }
.rv-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:9px; min-height:54px; padding:9px 14px; color:#44554b; background:rgba(255,250,235,.5); border-bottom:1px solid rgba(48,82,66,.14); font:700 .78rem system-ui,sans-serif; }.rv-toolbar select,.rv-toolbar button { min-height:36px; border:1px solid #9e947c; border-radius:8px; padding:7px 10px; background:#fffaf0; }.rv-toolbar button { color:#fff; border-color:#285746; background:#2c6753; font-weight:800; cursor:pointer; }.rv-toolbar span { margin-left:auto; }
.rv-layout { display:grid; grid-template-columns:minmax(370px,610px) minmax(190px,1fr); gap:16px; align-items:start; padding:16px; }.rv-board-wrap { padding:clamp(8px,2vw,18px); border-radius:18px; background:linear-gradient(145deg,#6a472c,#3a2b21); box-shadow:0 14px 30px rgba(38,28,18,.25),inset 0 0 0 2px rgba(255,229,160,.15); }.rv-board { width:min(100%,560px); aspect-ratio:1; display:grid; grid-template-columns:repeat(8,1fr); margin:auto; border:4px solid #173c31; border-radius:5px; overflow:hidden; background:#2c7d60; }.rv-cell { position:relative; border:0; border-right:1px solid rgba(10,49,37,.65); border-bottom:1px solid rgba(10,49,37,.65); background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(0,0,0,.045)); cursor:pointer; }.rv-cell:nth-child(8n){border-right:0}.rv-cell:nth-last-child(-n+8){border-bottom:0}.rv-cell.is-legal::after { content:""; position:absolute; width:18%; aspect-ratio:1; inset:50% auto auto 50%; transform:translate(-50%,-50%); border-radius:50%; background:rgba(246,223,111,.75); box-shadow:0 0 0 4px rgba(255,255,255,.12); }.rv-cell.is-last { box-shadow:inset 0 0 0 3px #e7c35a; }.rv-disc { display:block; border-radius:50%; }.rv-cell .rv-disc { position:absolute; inset:10%; box-shadow:inset -7px -9px 14px rgba(0,0,0,.28),2px 5px 7px rgba(0,0,0,.35); animation:rv-place .22s ease-out; }.rv-disc--black { background:radial-gradient(circle at 35% 27%,#5b625f,#111815 55%,#020303); }.rv-disc--white { background:radial-gradient(circle at 34% 27%,#fff,#efe9d8 58%,#bdb6a5); border:1px solid rgba(50,50,40,.2); }.rv-side { display:flex; flex-direction:column; gap:11px; }.rv-score { display:grid; grid-template-columns:1fr 1fr; gap:8px; }.rv-score>div { display:grid; grid-template-columns:30px 1fr auto; align-items:center; gap:7px; padding:10px; border:1px solid rgba(55,71,46,.2); border-radius:10px; background:rgba(255,250,232,.86); font:700 .8rem system-ui,sans-serif; }.rv-score .rv-disc { width:28px; height:28px; }.rv-score strong { font-size:1.45rem; }.rv-status { margin:0 0 5px; color:#275c4a; font:800 1rem/1.5 system-ui,sans-serif; }.rv-log { max-height:280px; overflow:auto; margin:0; padding-left:24px; color:#64543c; font:600 .75rem/1.65 system-ui,sans-serif; }
.st-online-grid { display:grid; grid-template-columns:270px 1fr; gap:14px; padding:14px; }.st-lobby form { display:grid; gap:8px; }.st-lobby label { color:#5b5c4c; font:700 .75rem system-ui,sans-serif; }.st-lobby input { width:100%; min-height:41px; margin-top:4px; padding:8px 10px; border:1px solid #a99a78; border-radius:8px; background:#fffaf0; }.st-lobby .st-subtle { width:100%; margin-top:8px; }.st-room-list { display:grid; gap:7px; max-height:410px; overflow:auto; margin-top:10px; }.st-room-card { display:grid; grid-template-columns:1fr auto; gap:7px; align-items:center; padding:9px; border:1px solid #b7a47d; border-radius:8px; background:#fff8e6; }.st-room-card strong,.st-room-card small { display:block; font-family:system-ui,sans-serif; }.st-room-card small { margin-top:3px; color:#796a52; font-size:.68rem; }.st-room-empty { padding:22px 7px; color:#776b58; text-align:center; font:600 .78rem/1.5 system-ui,sans-serif; }.st-room-main { min-width:0; }.st-waiting { min-height:520px; display:grid; place-items:center; padding:20px; text-align:center; }.st-waiting-icon { width:84px; height:84px; display:grid; place-items:center; margin:0 auto 13px; border:2px solid #ae8b4b; border-radius:50%; color:#77562a; background:#fff6d9; font-size:2rem; }.st-player-list { display:grid; gap:7px; width:min(100%,430px); margin:14px auto; }.st-player-row { display:flex; justify-content:space-between; gap:8px; padding:9px 11px; border:1px solid rgba(60,71,42,.18); border-radius:8px; background:rgba(255,251,235,.74); font:700 .78rem system-ui,sans-serif; }
@keyframes rv-place { from{transform:scale(.3) rotateY(90deg)} to{transform:scale(1) rotateY(0)} }
@media(max-width:780px){.st-shell{min-height:100svh;border-radius:0}.st-topbar{align-items:flex-start;padding:8px}.st-brand small{display:none}.st-brand-mark{width:36px;height:36px}.st-mode-tabs button{padding:6px 8px;font-size:.72rem}.rv-layout{grid-template-columns:1fr;padding:7px;gap:8px}.rv-board-wrap{padding:6px}.rv-side{display:grid;grid-template-columns:1fr 1fr}.rv-log-panel{display:none}.st-online-grid{grid-template-columns:1fr;padding:7px}.st-lobby{order:2}.rv-toolbar span{width:100%;margin:0}.st-waiting{min-height:340px}}
@media(prefers-reduced-motion:reduce){.rv-cell .rv-disc{animation:none}}