@font-face{font-family:TileSerif;src:url(../fonts/tile-serif.woff2) format("woff2");font-weight:600;font-display:block}*{box-sizing:border-box}html,body,#root{margin:0;height:100%;font-family:system-ui,-apple-system,sans-serif;background:#10161c;color:#e8e4d8}.app{display:flex;flex-direction:column;height:100%}.tabs{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:#0b1014;border-bottom:1px solid #263442}.brand{font-weight:700;margin-right:1rem;color:#d8b45a}.tab{background:none;border:1px solid transparent;color:#b8c2c8;padding:.4rem .9rem;border-radius:6px;cursor:pointer;font-size:.95rem}.tab:hover{color:#fff}.tab.active{border-color:#3a4f63;background:#1a2531;color:#fff}.game{position:relative;flex:1;min-height:0}.game canvas{display:block}.hud-top{position:absolute;top:.6rem;left:50%;transform:translate(-50%);display:flex;gap:1.4rem;padding:.45rem 1.1rem;background:#0a1016d1;border:1px solid #2c3c4c;border-radius:8px;font-size:.85rem;white-space:nowrap}.hud-bottom{position:absolute;bottom:.8rem;left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:.5rem}.status{padding:.3rem 1rem;border-radius:6px;background:#0a1016bf;border:1px solid #2c3c4c;font-size:.9rem}.status.active{border-color:#d8b45a;color:#ffe9b0}.actions{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center}button{font:inherit;cursor:pointer;border-radius:6px;border:1px solid #3a4f63;background:#1a2531;color:#e8e4d8;padding:.55rem 1.2rem}button:hover{background:#24344a}button.primary{background:#2c5f8a;border-color:#3f7cab}button.primary:hover{background:#35729f}button.win{background:#8a2c2c;border-color:#c04747;font-weight:700}button.win:hover{background:#a33636}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#060a0ea6}.panel{background:#141d26;border:1px solid #34465a;border-radius:12px;padding:1.5rem 2rem;min-width:22rem;max-height:80vh;overflow-y:auto}.panel h2{margin-top:0}.panel table{width:100%;border-collapse:collapse;margin-bottom:1rem}.panel td{padding:.25rem .4rem;border-bottom:1px solid #223040}.panel tr.total td{font-weight:700;border-top:2px solid #34465a}.num{text-align:right;font-variant-numeric:tabular-nums}.num.pos{color:#7fd08a}.num.neg{color:#e08080}.page{flex:1;overflow-y:auto;padding:1.5rem 2rem;max-width:64rem;margin:0 auto;width:100%}.score-table{width:100%;border-collapse:collapse;font-size:.9rem}.score-table th,.score-table td{text-align:left;padding:.45rem .6rem;border-bottom:1px solid #223040;vertical-align:top}.score-table tr.disabled{opacity:.45}.badge{margin-left:.5rem;font-size:.7rem;padding:.1rem .4rem;border-radius:4px;background:#5a3c14;color:#ffd98a;vertical-align:middle}.chip{display:inline-block;background:#f5f0e4;border-radius:3px;padding:.05rem .3rem;margin:0 .12rem .12rem 0;font-size:.78rem;font-weight:700}.example{max-width:16rem}.setting-group{display:flex;flex-direction:column;gap:.55rem;margin-bottom:1.5rem}.setting{display:flex;align-items:center;gap:.7rem;justify-content:space-between;max-width:34rem}.setting>span:first-child{flex:1}.setting input[type=number]{width:5rem}.setting select,.setting input[type=number]{font:inherit;background:#1a2531;color:#e8e4d8;border:1px solid #3a4f63;border-radius:4px;padding:.25rem .4rem}.note{color:#ffd98a;font-size:.9rem}.error{background:#4a1f1f;border:1px solid #8a3a3a;color:#ffc9c9;padding:.6rem 1rem;margin:.6rem 1rem;border-radius:6px}.loading{display:flex;align-items:center;justify-content:center;flex:1;color:#8fa0ac}.seat-badge{position:absolute;display:flex;align-items:center;gap:.5rem;padding:.3rem .75rem;background:#0a1016d1;border:1px solid #2c3c4c;border-radius:8px;font-size:.85rem;pointer-events:none}.seat-badge.turn{border-color:#d8b45a;box-shadow:0 0 10px #d8b45a59}.seat-badge .seat-wind{color:#d8b45a;font-weight:700;font-size:.75rem}.seat-badge .seat-score{font-variant-numeric:tabular-nums;color:#9fb2bd}.seat-badge-0{left:1rem;bottom:1rem}.seat-badge-1{right:1rem;top:50%;transform:translateY(-50%)}.seat-badge-2{left:50%;top:3.4rem;transform:translate(-50%)}.seat-badge-3{left:1rem;top:50%;transform:translateY(-50%)}.chow-picker{display:flex;align-items:center;gap:.5rem}.chow-label{font-size:.85rem;color:#ffe9b0}.chow-option{display:flex;gap:.2rem;padding:.35rem .5rem;background:#1a2531;border:1px solid #d8b45a}.chow-option:hover{background:#24344a}.chow-tile{display:inline-block;background:#f5f0e4;border-radius:3px;padding:.15rem .4rem;font-weight:700;font-size:.95rem}.chow-tile.claimed{outline:2px solid #d8b45a}.hash{font-family:ui-monospace,monospace;font-size:.78rem;color:#8fa0ac}.badge.own{background:#14425a;color:#9fd6ff}.score-table.editor input[type=number]{width:4rem;font:inherit;background:#1a2531;color:#e8e4d8;border:1px solid #3a4f63;border-radius:4px;padding:.15rem .3rem}.manual p{max-width:46rem;line-height:1.55}.winning-hand{display:flex;align-items:flex-end;gap:.7rem;flex-wrap:wrap;margin:.4rem 0 1rem}.hand-group{display:inline-flex;gap:2px}.hand-group.bonus{opacity:.85}.tile-image{border-radius:4px;background:#f5f0e4;box-shadow:0 2px 4px #00000073}.tile-image.winning{outline:3px solid #d8b45a;outline-offset:1px}.avatar{display:inline-flex;align-items:center;justify-content:center;width:1.55rem;height:1.55rem;border-radius:50%;font-size:.72rem;font-weight:700;color:#f4eede;border:1px solid rgba(255,255,255,.25);flex:none}.avatar.bot{font-size:.58rem;letter-spacing:.03em;opacity:.9}.brand{display:inline-flex;align-items:center;gap:.5rem;letter-spacing:.06em;text-transform:uppercase}.brand-mark{width:1.35rem;height:1.55rem}.page h2{font-size:1.6rem;letter-spacing:.01em;margin:0 0 1.4rem}.page h3{font-size:1.05rem;text-transform:uppercase;letter-spacing:.08em;color:#d8b45a;margin:2rem 0 .9rem;padding-bottom:.45rem;border-bottom:1px solid #24333f}.setting-group{display:grid;grid-template-columns:repeat(auto-fit,minmax(19rem,1fr));gap:.55rem 1.5rem;margin-bottom:1.6rem;max-width:none}.setting{display:flex;align-items:center;gap:.75rem;justify-content:space-between;max-width:none;padding:.55rem .85rem;border-radius:8px;background:#151d26;border:1px solid #22303c;min-height:2.9rem}.setting:hover{border-color:#33455a}.setting>span:first-child{flex:1;font-size:.92rem;line-height:1.3}.setting input[type=checkbox]{width:1.1rem;height:1.1rem;accent-color:#d8b45a;flex:none}.setting select,.setting input[type=number],.setting input[type=text],.setting input:not([type]){font:inherit;background:#0f151c;color:#e8e4d8;border:1px solid #3a4f63;border-radius:6px;padding:.35rem .5rem;max-width:13rem}.setting select:focus,.setting input:focus{outline:2px solid #d8b45a;outline-offset:1px}.setting input[type=range]{accent-color:#d8b45a;max-width:11rem}.setting button{padding:.4rem .85rem;font-size:.88rem;flex:none}.score-table.editor{display:block;overflow-x:auto;white-space:nowrap}.score-table.editor tbody,.score-table.editor thead{display:table;width:100%;min-width:44rem}.page .note{background:#d8b45a14;border-left:3px solid #d8b45a;padding:.55rem .8rem;border-radius:0 6px 6px 0;max-width:46rem}@media(max-width:640px){.page{padding:1rem}.setting{flex-wrap:wrap;row-gap:.4rem}.setting>span:first-child{flex-basis:100%}.tabs{flex-wrap:wrap;row-gap:.3rem}}.setting.wide{grid-column:1 / -1;max-width:46rem}.page .hash{grid-column:1 / -1;margin:.2rem 0 0}.situational{display:inline-block;font-size:.78rem;color:#9fb2bd;border:1px dashed #3a4f63;border-radius:5px;padding:.15rem .5rem;white-space:nowrap}
