*{box-sizing:border-box;margin:0;padding:0}:root{--bg: #3e2f76;--window: #4c3a90;--window-deep: #352767;--line: #f2edff;--outline: #1d1340;--dim: #7361b8;--text: #f5f1ff;--text-soft: #c4b9e6;--gold: #ffd54a;--btn: #5f4aa8;--btn-light: #8570d6;--btn-dark: #453380}body{font-family:DotGothic16,MS Gothic,Hiragino Kaku Gothic ProN,Meiryo,sans-serif;font-size:15px;background-color:var(--bg);background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:24px 24px;color:var(--text)}.app{max-width:980px;margin:0 auto;padding:12px 10px 20px}a{color:var(--gold)}.header{display:flex;align-items:center;gap:12px;padding:8px 14px;background:var(--btn);color:#fff;border:3px solid var(--line);margin:3px 3px 14px;min-height:48px;box-shadow:0 0 0 3px var(--outline),5px 5px 0 3px #00000073,inset 3px 3px 0 0 var(--btn-light),inset -3px -3px 0 0 var(--btn-dark)}.header h1{font-size:20px;color:var(--gold);text-shadow:2px 2px 0 var(--outline);letter-spacing:2px}.back-btn{padding:4px 10px;font-size:13px}.subtitle{font-size:11px;color:#cbbfe8}.header-code{margin-left:auto;font-size:13px;color:var(--gold)}.panel{background:var(--window);border:3px solid var(--line);padding:12px;margin:3px 3px 14px;box-shadow:0 0 0 3px var(--outline),5px 5px 0 3px #00000073}.panel h2{font-size:13px;color:var(--gold);margin-bottom:8px;letter-spacing:1px}.center{text-align:center}.row{display:flex;gap:6px;align-items:center}.row.center{justify-content:center;margin:8px 0}.mono{font-family:DotGothic16,Consolas,monospace;letter-spacing:2px}.big{font-size:18px}.muted{color:var(--text-soft);font-size:12px}.rules-text{line-height:1.8}.section-gap{margin-top:18px}.win-condition{padding:8px 12px;font-size:13px;color:var(--gold)}input{padding:6px 10px;border:2px solid var(--line);background:var(--window-deep);color:var(--text);font-size:15px;font-family:inherit;box-shadow:0 0 0 2px var(--outline)}input::placeholder{color:#9d90c9}input:focus{outline:none;border-color:var(--gold)}button{padding:6px 16px;border:2px solid var(--line);background:var(--btn);color:#fff;cursor:pointer;font-size:15px;font-family:inherit;box-shadow:0 0 0 2px var(--outline),4px 4px 0 2px #00000073,inset 2px 2px 0 0 var(--btn-light),inset -2px -2px 0 0 var(--btn-dark)}button:hover:not(:disabled){background:#6f58c0}button:active:not(:disabled){transform:translate(3px,3px);box-shadow:0 0 0 2px var(--outline),inset -2px -2px 0 0 var(--btn-light),inset 2px 2px 0 0 var(--btn-dark)}button:disabled{color:#ab9fd4;cursor:default;background:#4a3a87;border-color:#8b7cc4;box-shadow:0 0 0 2px var(--outline)}button.selected{background:var(--gold);color:var(--window);border-color:var(--line);box-shadow:0 0 0 2px var(--outline),4px 4px 0 2px #00000073,inset 2px 2px #ffe89a,inset -2px -2px #c79a1e}button.primary{background:var(--gold);color:var(--window);box-shadow:0 0 0 2px var(--outline),4px 4px 0 2px #00000073,inset 2px 2px #ffe89a,inset -2px -2px #c79a1e}button.primary:hover:not(:disabled){background:#ffe066}button.primary:disabled{background:#4a3a87;color:#ab9fd4;box-shadow:0 0 0 2px var(--outline)}button.danger{background:#c8323f;color:#fff;box-shadow:0 0 0 2px var(--outline),4px 4px 0 2px #00000073,inset 2px 2px #e8707c,inset -2px -2px #7d1620}button.danger:hover:not(:disabled){background:#d84955}button.danger-option.selected{background:#c8323f;color:#fff;box-shadow:0 0 0 2px var(--outline),4px 4px 0 2px #00000073,inset 2px 2px #e8707c,inset -2px -2px #7d1620}button.confirm{margin-top:10px;min-width:130px}button.declare{min-width:90px}button.link{border:none;background:none;box-shadow:none;color:var(--gold);text-decoration:underline;margin-top:4px;font-size:13px}button.link:hover:not(:disabled){background:none;color:#ffe066}button.link:active:not(:disabled){transform:none;box-shadow:none}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#1d1340a6;display:flex;align-items:center;justify-content:center;z-index:10}.modal{max-width:440px;margin:0 16px;padding:20px 24px}.modal p{margin-bottom:16px;line-height:1.7}.modal .row.center{gap:16px}.error-bar{position:fixed;bottom:14px;left:50%;transform:translate(-50%);background:#c8323f;color:#fff;padding:8px 20px;border:3px solid var(--line);box-shadow:0 0 0 3px var(--outline),5px 5px 0 3px #00000073}.room-list{margin-top:8px;width:100%;border-collapse:collapse}.room-list td{border-top:1px dotted var(--dim);padding:6px 8px}.waiting-players{display:flex;justify-content:center;gap:14px;margin:8px 0;flex-wrap:wrap}.waiting-player{display:inline-flex;align-items:center;gap:6px}.settings{margin:14px auto;padding:12px;border:2px solid var(--dim);background:var(--window-deep);max-width:560px}.settings-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}.settings-row label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:#cbbfe8}.settings-row input{width:90px}.color-picker{display:flex;gap:14px;justify-content:center;margin:10px 0}.color-swatch{width:30px;height:30px;border:2px solid var(--outline);padding:0;box-shadow:inset 2px 2px #fff6,inset -2px -2px #00000059,3px 3px #00000073}button.color-swatch:hover:not(:disabled){background:inherit}button.color-swatch:active:not(:disabled){transform:translate(2px,2px);box-shadow:inset 2px 2px #00000059,inset -2px -2px #fff6}.color-swatch.mine{cursor:default;outline:3px solid var(--gold);outline-offset:2px}.color-swatch.taken{opacity:.3;cursor:default}.status-row{display:flex;gap:14px;align-items:stretch}.board-area{flex:1;min-width:0}.goal-track-area{margin-bottom:12px}.goal-track{display:flex;gap:5px;flex-wrap:wrap}.goal-cell{width:42px;height:54px;border:2px solid var(--dim);background:var(--window-deep);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:3px;padding-top:3px}.goal-cell .num{font-size:11px;color:var(--text-soft)}.goal-cell.claimed{background:#55431a;border-color:var(--gold)}.goal-cell.claimed .num{color:var(--gold)}.bridge-h{display:flex;gap:5px;border:2px solid var(--dim);background:var(--window-deep);padding:8px;overflow-x:auto}.bcell{flex:1;min-width:46px;min-height:74px;background:#c9974f;border:2px solid var(--outline);padding:4px 3px;display:flex;flex-direction:column;align-items:center;gap:3px;box-shadow:inset 3px 3px #e0b46e,inset -3px -3px #8a6430}.bcell.start{background:#7ab648;box-shadow:inset 3px 3px #a4d878,inset -3px -3px #4f7d2a}.bcell.goal-end{background:#8f6fd8;box-shadow:inset 3px 3px #b79bf0,inset -3px -3px #5e4499}.bcell.goal-end .bcell-label{color:#fff;text-shadow:1px 1px 0 var(--outline)}.bcell-label{font-size:11px;color:#3d2c10}.bcell.start .bcell-label{color:#21400d}.bcell-pieces{display:flex;flex-wrap:wrap;gap:3px;justify-content:center}.cell-label{font-size:11px;color:#cbbfe8;margin-bottom:4px}.players-panel{flex:0 0 250px;display:flex;flex-direction:column;gap:8px}@media (max-width: 600px){.status-row{flex-direction:column-reverse}.players-panel{flex:none}}.player-box{background:var(--window-deep);border:2px solid var(--dim);padding:7px 10px}.player-box.current{border-color:var(--gold);background:#4a3a14}.player-box.disconnected{opacity:.5}.player-name{font-weight:700;display:flex;align-items:center;gap:6px;margin-bottom:3px;flex-wrap:wrap}.player-info{font-size:12px;color:#cbbfe8;display:flex;gap:10px}.score{font-weight:700;color:var(--gold)}.believe-badge{font-size:10px;background:#37a94b;color:#fff;padding:2px 6px;border:1px solid var(--outline)}.chip{display:inline-block;width:12px;height:12px;border:2px solid var(--outline);box-shadow:inset 1px 1px #fff6}.tag{font-size:10px;background:var(--btn);color:#fff;padding:2px 6px;border:1px solid var(--outline)}.piece{width:24px;height:24px;border:2px solid var(--outline);color:#fff;font-size:12px;display:inline-flex;align-items:center;justify-content:center;text-shadow:1px 1px 0 var(--outline);box-shadow:inset 2px 2px #ffffff59,inset -2px -2px #00000059}.action p{margin:5px 0}.die{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;background:var(--line);border:2px solid var(--outline);color:var(--window);font-size:20px;font-weight:700;vertical-align:middle;box-shadow:inset -2px -2px #b9aed6,3px 3px #00000073}.shown-banner{background:#55431a;border:2px solid var(--gold);padding:8px;color:#ffe9a8}.dice-area{margin-top:12px;display:flex;gap:24px;justify-content:center;align-items:flex-end;min-height:96px}.die-card{text-align:center}.die-card .cell-label{margin-bottom:4px}.die-big{display:inline-flex;align-items:center;justify-content:center;width:58px;height:58px;background:var(--line);border:3px solid var(--outline);color:var(--window);font-size:30px;font-weight:700;box-shadow:inset -3px -3px #b9aed6,inset 3px 3px #fff,5px 5px #00000073}.die-big.hidden-die{background:var(--btn);color:var(--gold);box-shadow:inset 3px 3px 0 0 var(--btn-light),inset -3px -3px 0 0 var(--btn-dark),5px 5px #00000073}.die-big.rolling{animation:dice-shake .25s infinite}@keyframes dice-shake{0%{transform:translate(0) rotate(0)}25%{transform:translate(2px,-3px) rotate(8deg)}50%{transform:translate(-2px,2px) rotate(-6deg)}75%{transform:translate(1px,3px) rotate(4deg)}to{transform:translate(0) rotate(0)}}.die-big.reveal-slow{animation:dice-reveal 3s ease-out 1.5s both}@keyframes dice-reveal{0%{filter:blur(14px);opacity:.15;transform:scale(.85)}60%{filter:blur(7px);opacity:.6}to{filter:blur(0);opacity:1;transform:scale(1)}}.cutin-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:30;display:flex;align-items:center;pointer-events:none}.cutin-band{width:100%;padding:28px 12px;background:#000000e6;border-top:3px solid var(--line);border-bottom:3px solid var(--line);text-align:center;font-size:28px;letter-spacing:2px;color:var(--text);text-shadow:2px 2px 0 var(--outline);animation:cutin-band 1.5s ease both}@keyframes cutin-band{0%{transform:translate(-100%)}12%{transform:translate(0)}85%{transform:translate(0);opacity:1}to{transform:translate(0);opacity:0}}.countdown{font-size:15px;color:#cbbfe8}.countdown.danger{color:#ff5a5a;font-weight:700;font-size:18px;text-shadow:1px 1px 0 var(--outline)}.result-table{margin:10px auto;border-collapse:collapse}.result-table th,.result-table td{border:2px solid var(--dim);padding:5px 14px}.result-table th{background:var(--btn);color:var(--gold);font-size:12px;border-color:var(--line)}.bottom-row{display:flex;gap:14px;align-items:stretch}.bottom-row .panel{margin-bottom:3px}.log{flex:1;min-width:0;height:170px;overflow-y:auto;font-size:12px;line-height:1.9}.log-line{border-bottom:1px dotted var(--dim)}.chat-panel{flex:1;min-width:0;display:flex;flex-direction:column;height:170px}.chat-list{flex:1;overflow-y:auto;font-size:12px;line-height:1.9}.chat-line{border-bottom:1px dotted var(--dim);word-break:break-word}.chat-line b{filter:brightness(1.5)}.chat-input-row{display:flex;gap:8px;margin-top:8px}.chat-input-row input{flex:1;min-width:0}.log::-webkit-scrollbar,.chat-list::-webkit-scrollbar{width:12px}.log::-webkit-scrollbar-track,.chat-list::-webkit-scrollbar-track{background:var(--window-deep)}.log::-webkit-scrollbar-thumb,.chat-list::-webkit-scrollbar-thumb{background:var(--btn);border:2px solid var(--window-deep)}