:root{color:#f4efe5;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;--ink:#101820;--ink-soft:#17262b;--felt:#183b3b;--felt-light:#225252;--paper:#f4efe5;--paper-dim:#c5c0b5;--line:#f4efe529;--line-gold:#c49a558a;--gold:#c49a55;--vermillion:#d45b45;--shadow:0 18px 44px #00000040;background:#101820;font-family:Hiragino Sans,Yu Gothic,Meiryo,sans-serif}*{box-sizing:border-box}body{background:radial-gradient(circle at 12% 0%, #c49a5514, transparent 32rem), radial-gradient(circle at 88% 100%, #2252527a, transparent 34rem), var(--ink);min-width:320px;min-height:100vh;margin:0}button,input{font:inherit}button{-webkit-tap-highlight-color:transparent}#root{width:100%;min-height:100vh}.app-shell{width:min(1180px,100% - 40px);min-height:100vh;margin:0 auto;padding:42px 0 56px}.app-header{border-left:2px solid var(--vermillion);padding:16px 0 34px 28px;position:relative}.app-header:after{background:linear-gradient(90deg, var(--line-gold), transparent);content:"";height:1px;position:absolute;bottom:0;left:28px;right:0}.app-kicker,.section-label,.status-strip span,.opponent-count span{color:var(--gold);letter-spacing:.18em;font-size:.67rem;font-weight:700;display:block}.app-header h1,h2,h3,p{margin-top:0}.app-header h1{color:var(--paper);letter-spacing:.08em;margin:10px 0 4px;font-family:Yu Mincho,Hiragino Mincho ProN,serif;font-size:clamp(2.6rem,7vw,5.8rem);font-weight:500;line-height:.95}.app-header p{color:var(--paper-dim);letter-spacing:.12em;margin:0;font-size:.95rem}.status-strip{border:1px solid var(--line);box-shadow:var(--shadow);white-space:nowrap;background:#17262be6;align-items:center;gap:20px;margin:24px 0;padding:8px 14px;display:flex;overflow-x:auto}.status-strip>div{flex:none;align-items:baseline;gap:7px;min-width:0;display:flex}.status-strip span{display:inline}.status-strip>div:not(:last-child):after{color:var(--paper-dim);content:"/";opacity:.55;margin-left:20px}.status-strip strong{color:var(--paper);text-overflow:ellipsis;white-space:nowrap;font-size:.82rem;font-weight:500;display:inline;overflow:hidden}.lobby-layout{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;display:grid}.lobby-panel,.room-list-panel,.log-panel,.game-table{border:1px solid var(--line);box-shadow:var(--shadow);background:#17262bc7}.lobby-panel{min-height:300px;padding:26px}.lobby-panel--create{border-top:2px solid var(--vermillion)}.lobby-panel--join{border-top:2px solid var(--gold)}h2,h3{color:var(--paper);font-family:Yu Mincho,Hiragino Mincho ProN,serif;font-weight:500}h2{letter-spacing:.08em;margin:5px 0 24px;font-size:1.7rem}h3{margin-bottom:14px;font-size:1.25rem}label{color:var(--paper-dim);margin:16px 0 7px;font-size:.8rem;display:block}input{border:1px solid var(--line);width:100%;color:var(--paper);background:#101820b8;border-radius:2px;outline:none;padding:11px 13px;transition:border-color .16s,background .16s}input:focus{border-color:var(--gold);background:#101820f2}input:disabled{color:#777b79;opacity:.7}.lobby-actions{justify-content:flex-end;gap:9px;margin-top:18px;display:flex}.room-list-panel{grid-column:1/-1;padding:22px 26px}.section-heading,.game-table__header{justify-content:space-between;align-items:center;gap:16px;display:flex}.section-heading h2,.game-table__header h2{margin-bottom:0}.section-heading--compact{margin-bottom:16px;display:block}.section-heading--compact h2{margin-top:5px}.room-list{border-top:1px solid var(--line)}.room-row{border-bottom:1px solid var(--line);color:var(--paper-dim);justify-content:space-between;align-items:center;gap:16px;padding:13px 4px;display:flex}.room-row strong{color:var(--paper);font-weight:500}.empty-state{color:var(--paper-dim);margin:16px 0 0;font-size:.9rem}.game-table{-webkit-user-select:none;user-select:none;background:radial-gradient(ellipse at center, #2252528c, transparent 72%), var(--felt);margin-top:18px;padding:26px;position:relative;overflow:hidden}.game-table:before{pointer-events:none;content:"";border:1px solid #c49a5538;position:absolute;inset:13px}.game-table__header,.opponent-seats,.top-card-area,.result-panel,.hand-panel{z-index:1;position:relative}.round-status{border:1px solid var(--line-gold);color:var(--gold);letter-spacing:.14em;padding:5px 9px;font-size:.68rem}.opponent-seats{flex-wrap:wrap;justify-content:center;gap:9px;min-height:74px;margin:24px 0 18px;display:flex}.opponent-seat{border:1px solid var(--line);background:#10182061;min-width:132px;padding:12px 14px;position:relative}.action-bubbles{z-index:4;flex-direction:column;align-items:center;gap:5px;display:flex;position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%)}.action-bubble{border:1px solid var(--gold);width:max-content;max-width:220px;color:var(--paper);white-space:nowrap;background:#356262;padding:8px 11px;font-size:.78rem;font-weight:700;animation:3s ease-in both bubble-life;position:relative;box-shadow:0 8px 18px #00000047}.action-bubble .card-tile{vertical-align:middle;margin:0 5px 0 0;display:inline-block}.action-bubble .card-image,.action-bubble .card-fallback{width:24px;height:34px;box-shadow:none;vertical-align:middle;border-width:1px}.action-bubble:after{border-right:1px solid var(--gold);border-bottom:1px solid var(--gold);content:"";background:#356262;width:10px;height:10px;position:absolute;bottom:-6px;left:50%;transform:translate(-50%)rotate(45deg)}.action-bubble--self{position:absolute;inset:-48px 16px auto auto;transform:none}.action-bubble--self:after{inset:auto 24px -6px auto}@keyframes bubble-life{0%,72%{opacity:1}to{opacity:.08}}.opponent-seat--turn{border-color:var(--gold);background:#c49a551f}.opponent-name{color:var(--paper);font-size:.9rem}.opponent-count{color:var(--paper-dim);align-items:baseline;gap:8px;margin-top:8px;font-size:.82rem;display:flex}.opponent-count span{font-size:.58rem;display:inline}.bot-mark{color:var(--gold);letter-spacing:.1em;font-size:.55rem;position:absolute;top:7px;right:8px}.turn-mark{color:var(--gold);letter-spacing:.16em;margin-bottom:5px;font-size:.58rem;font-weight:700;display:block}.turn-mark--hidden{visibility:hidden}.top-card-area{border-top:1px solid var(--line);border-bottom:1px solid var(--line);justify-content:center;align-items:center;gap:28px;min-height:156px;padding:18px;display:flex}.empty-card{border:1px dashed var(--line-gold);width:80px;height:112px}.turn-summary{min-width:200px;color:var(--paper-dim);text-align:left;font-size:.82rem;line-height:1.8;overflow:visible}.turn-summary p{margin:0}.card-tile{margin:.25rem;display:inline-block}.card-tile--playable{cursor:pointer}.card-image,.card-fallback{object-fit:cover;border:1px solid #f4efe552;width:80px;height:112px;box-shadow:0 7px 14px #00000047}.card-fallback{color:var(--ink);background:var(--paper);text-align:center;justify-content:center;align-items:center;padding:8px;font-size:.75rem;display:flex}.card-tile--playable{transition:transform .15s,filter .15s}.card-tile--playable:hover,.card-tile--playable:focus-visible{filter:drop-shadow(0 9px 6px #00000040);transform:translateY(-10px)}.card-tile--playable:hover .card-image,.card-tile--playable:hover .card-fallback,.card-tile--playable:focus-visible .card-image,.card-tile--playable:focus-visible .card-fallback{outline:3px solid var(--vermillion);outline-offset:-2px}.result-panel{border:1px solid var(--line);background:#10182059;max-width:620px;margin:20px auto 0;padding:18px 20px}.result-panel ul{color:var(--paper-dim);grid-template-columns:repeat(2,1fr);gap:8px 24px;margin:0;padding:0;list-style:none;display:grid}.result-panel li{border-bottom:1px solid var(--line);padding-bottom:7px}.resolution-panel{border:1px solid var(--line-gold);background:#1018206b;max-width:620px;margin:20px auto 0;padding:18px 20px}.resolution-panel h3{margin:6px 0 12px}.resolution-hand{flex-wrap:wrap;gap:2px;display:flex}.resolution-hand .card-image,.resolution-hand .card-fallback{width:58px;height:81px}.resolution-hand .card-tile{animation:.26s ease-out both card-reveal}@keyframes card-reveal{0%{opacity:0;transform:translateY(8px)rotate(-2deg)}to{opacity:1;transform:translateY(0)rotate(0)}}.revealed-hand{border-bottom:1px solid var(--line);margin-bottom:18px;padding-bottom:14px}.revealed-hand__cards{flex-wrap:wrap;gap:2px;margin-top:8px;display:flex}.revealed-hand__cards .card-image,.revealed-hand__cards .card-fallback{width:48px;height:67px}.result-breakdown{border-bottom:1px solid var(--line);color:var(--paper-dim);margin-bottom:18px;padding-bottom:12px;font-size:.82rem}.result-breakdown p{margin:6px 0 0}.return-score-summaries{gap:14px;margin-bottom:18px;display:grid}.score-summary{border:1px solid var(--line);background:#1018204d;padding:14px}.score-summary h4{color:var(--paper);margin:0 0 9px;font-family:Yu Mincho,Hiragino Mincho ProN,serif;font-size:1rem;font-weight:500}.score-summary__hand{flex-wrap:wrap;gap:2px;margin-bottom:8px;display:flex}.score-summary__hand .card-image,.score-summary__hand .card-fallback{width:48px;height:67px}.score-summary p{color:var(--paper-dim);margin:5px 0 0;font-size:.8rem}.score-summary strong{color:var(--paper);margin-top:8px;display:block}.hand-panel{border:1px solid var(--line-gold);background:#1018205c;margin-top:24px;padding:50px 16px 16px;position:relative}.hand-panel__name{color:var(--paper);font-family:Yu Mincho,serif;position:absolute;top:15px;left:16px}.hand-panel--turn{border-color:var(--gold);background:#c49a550f}.your-turn-mark{color:var(--gold);letter-spacing:.12em;vertical-align:middle;margin-left:10px;font-family:inherit;font-size:.62rem;display:inline-block}.your-turn-mark--hidden{visibility:hidden}.hand-panel__pass{position:absolute;top:10px;right:112px}.hand-panel__dobon{position:absolute;top:10px;right:16px}.hand-list{flex-wrap:wrap;justify-content:center;gap:3px;margin:0;padding:12px 0 0;list-style:none;display:flex}.game-button{cursor:pointer;letter-spacing:.05em;min-height:38px;padding:8px 16px;color:var(--paper)!important;box-shadow:none!important;border:1px solid #0000!important;border-radius:2px!important;font-weight:600!important;transition:transform .14s,background-color .14s,border-color .14s!important}.game-button--sm{min-height:32px;padding:6px 11px;font-size:.78rem}.game-button--md{font-size:.88rem}.game-button--primary{background:var(--felt-light)!important;border-color:#c49a558c!important}.game-button--danger{background:#ad5a4d!important;border-color:#c27667!important}.game-button--success{border-color:var(--gold)!important;background:#8a6c35!important}.game-button--neutral{border-color:var(--line)!important;background:#f4efe51a!important}.game-button:disabled{color:#f4efe573!important;background:#f4efe514!important;border-color:#0000!important}.game-button:not(:disabled):hover{filter:brightness(1.12);transform:translateY(-2px)!important}.game-button:not(:disabled):focus-visible{outline:2px solid var(--gold);outline-offset:3px}.log-panel{margin-top:18px;padding:22px 26px}.log-panel h2{margin-top:5px;margin-bottom:0}.text-button{color:var(--paper-dim);cursor:pointer;background:0 0;border:0;font-size:.78rem}.text-button:hover{color:var(--paper)}.log-list{border-top:1px solid var(--line);height:150px;color:var(--paper-dim);text-align:left;margin-top:18px;padding-top:10px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.72rem;line-height:1.8;overflow-y:auto}.log-list div{border-left:1px solid #c49a554d;padding-left:10px}.player-list__items{color:var(--paper-dim);gap:8px;font-size:.88rem;display:grid}.player-list__items>div{border-bottom:1px solid var(--line);padding:8px 0}@media (width<=720px){.app-shell{width:min(100% - 24px,580px);padding-top:24px}.app-header{padding-left:18px}.app-header:after{left:18px}.status-strip{gap:14px;margin:16px 0}.lobby-layout{grid-template-columns:1fr}.lobby-panel,.room-list-panel,.log-panel,.game-table{padding:18px}.room-list-panel{grid-column:auto}.game-table{padding:20px 14px}.game-table:before{inset:8px}.top-card-area{gap:16px;padding:14px 6px}.turn-summary{min-width:0;font-size:.72rem}.opponent-seat{min-width:118px}.result-panel ul{grid-template-columns:1fr}.hand-panel{margin-left:-4px;margin-right:-4px;padding-left:8px;padding-right:8px}.card-image,.card-fallback{width:64px;height:90px}.hand-list{flex-wrap:nowrap;justify-content:flex-start;padding:12px 2px 10px;overflow-x:auto}.hand-list li{flex:none}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}}
