@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=Noto+Serif+JP:wght@600;800&display=swap');
:root{color-scheme:dark;--gold:#d9bc77;--muted:#a9b9b2}*{box-sizing:border-box}body{margin:0;background:#101d19;color:#eeeede;font-family:'Noto Sans JP',sans-serif;font-size:14px}header{height:84px;border-bottom:1px solid #ffffff13;display:flex;align-items:center;justify-content:space-between;padding:0 6%}.brand{color:var(--gold);text-decoration:none;font-size:24px;display:flex;gap:12px;align-items:center}.brand b{color:#f6f2df;font-family:'Noto Serif JP',serif}.brand small{font-size:10px;letter-spacing:3px;margin-left:12px}button{font:inherit;cursor:pointer;background:#ffffff08;border:1px solid #ffffff30;color:#eeeede;border-radius:6px;padding:11px 18px;transition:transform .15s,background .15s}button:hover{background:#ffffff15}button:focus-visible{outline:3px solid var(--gold);outline-offset:4px}main{max-width:1180px;margin:auto;padding:35px 28px}.intro{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px}.eyebrow{font-size:10px;letter-spacing:3px;color:var(--gold)}h1{font-family:'Noto Serif JP',serif;font-size:38px;letter-spacing:4px;margin:10px 0}p{color:var(--muted);line-height:1.9}.intro p{margin:0}.arena{border:1px solid #b79d613d;border-radius:20px;background:radial-gradient(ellipse at center,#214e3d,#173b2e 70%);padding:22px 30px;box-shadow:0 20px 70px #0005,inset 0 0 70px #0002}.round{display:flex;justify-content:space-between;color:#c4d0c0;font-size:12px;margin-bottom:24px}#opponents{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}.opponent{padding:14px;border:1px solid #ffffff16;border-radius:9px;background:#071d1726}.opponent.active{border-color:var(--gold)}.opponent b{float:right;color:var(--gold);font-size:21px}.opponent small{font-size:11px}em{font-style:normal;font-size:11px;color:#142b20;background:var(--gold);padding:2px 6px;border-radius:3px}.backs{display:flex;justify-content:center;margin-top:13px;gap:5px}.backs span{width:32px;height:44px;border:2px solid #819c8c;border-radius:4px;background:repeating-linear-gradient(45deg,#294a3b,#294a3b 3px,#355747 3px,#355747 5px);display:grid;place-items:center;color:#a0b7a1}.table-center{text-align:center;padding:21px 0 15px;min-height:142px}.seal{font-size:32px;color:#d9bc773d}#message{line-height:1.9;min-height:28px}#actions{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:10px}.gold{background:var(--gold);color:#18281f;border-color:var(--gold);font-weight:700}.gold:hover{background:#ead29c}#rivers{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:14px 0 22px}.river{border-top:1px solid #ffffff1c;padding-top:10px}.river small{font-size:10px;color:#adc0b2}.river>div{display:flex;gap:4px;flex-wrap:wrap;margin-top:7px}.mini{font-size:12px;background:#eeeade;color:#23352b;border-radius:3px;padding:3px 5px}.red{color:#b94442!important}.empty{color:#ffffff30}.you{border-top:1px solid #ffffff24;padding-top:16px}.playerline{display:flex;justify-content:space-between;align-items:center;color:#b6c5b6;font-size:11px}.playerline b{font-size:18px;color:#fff;margin:0 10px}.playerline>span:last-child b{font-size:26px;color:var(--gold)}#hand{display:flex;gap:12px;justify-content:center;min-height:122px;padding:15px 0 5px}.card{width:72px;height:102px;background:#f4f0e4;color:#243d32;border:1px solid #d2cbbb;border-radius:7px;box-shadow:0 4px 0 #b1ad9f,0 8px 12px #0003;padding:9px;text-align:left;display:flex;flex-direction:column;justify-content:space-between;flex-shrink:0;font-family:Georgia,serif}.card span{font-size:22px;line-height:1}.card strong{align-self:center;font-size:35px;font-weight:400}.card.joker{background:#e4d29e;color:#5c4a20}.card.joker strong{font:10px sans-serif;letter-spacing:1px;margin-bottom:14px}button.card:hover{background:#fffaf0;transform:translateY(-9px)}#hand .card:last-child:nth-child(5){margin-left:15px}#hint{height:25px;text-align:center;font-size:12px;color:#d9bc77;margin:10px 0 0}.bottom{display:flex;justify-content:space-between;font-size:11px;color:#81958a;margin:20px 0}details{color:#9cad9f;font-size:12px;padding:14px 0}summary{cursor:pointer}#log{white-space:pre-line;line-height:2;padding-top:12px}dialog{background:#152b23;color:#eeeede;border:1px solid #9b8759;border-radius:14px;width:min(620px,92vw);padding:30px;max-height:85vh}dialog::backdrop{background:#000a}dialog p{font-size:13px}table{width:100%;border-collapse:collapse;font-size:13px}td,th{text-align:left;padding:10px;border-bottom:1px solid #ffffff20}td:first-child{color:var(--gold);font-size:20px}.close{float:right}.winning{display:flex;gap:5px;width:100%;justify-content:center;margin:6px}.winning .card{width:43px;height:61px;padding:5px}.winning .card span{font-size:15px}.winning .card strong{font-size:20px}@media(max-width:650px){header{height:65px;padding:0 18px}.brand{font-size:19px}.brand small{display:none}header button{font-size:11px;padding:8px}main{padding:24px 12px}.intro{margin-bottom:20px}h1{font-size:27px;letter-spacing:2px}.intro p{font-size:12px}.intro>button{font-size:11px;padding:10px}.eyebrow{font-size:8px;letter-spacing:1.5px}.arena{padding:17px 12px;border-radius:13px}#opponents{gap:6px}.opponent{padding:9px 6px;font-size:10px}.opponent b{font-size:16px}.backs{gap:3px}.backs span{width:19px;height:29px;font-size:10px}.round{font-size:10px}.table-center{min-height:150px}#message{font-size:13px}#rivers{gap:6px}.mini{font-size:10px;padding:2px 3px}#hand{gap:7px;min-height:110px}.card{width:53px;height:82px;padding:7px}.card span{font-size:19px}.card strong{font-size:28px}#hand .card:last-child:nth-child(5){margin-left:5px}.bottom{font-size:9px}.playerline b{font-size:15px}}

header{gap:10px}.brand{margin-right:auto} .setting-row{margin:25px 0;display:grid;gap:12px}.setting-row label{font-weight:700}.setting-row select{background:#203d30;color:#fff;border:1px solid #a4b5a4;border-radius:6px;font:inherit;padding:12px;width:100%}.setting-row small,.setting-note{color:#b9c7bb;line-height:1.8;font-size:12px}.setting-row input{width:100%;accent-color:#d9bc77}.setting-row output{float:right;color:#d9bc77}@media(max-width:650px){header{gap:6px}.brand{gap:4px;font-size:16px}header button{padding:7px;font-size:10px}}

[hidden]{display:none!important}.lobby{text-align:center;min-height:75vh;display:flex;align-items:center;flex-direction:column;justify-content:center;padding:30px 10px 50px}.lobby-emblem{color:var(--gold);font-size:46px;margin-bottom:18px}.lobby h1{font-size:58px;margin:15px 0 0;letter-spacing:9px}.lobby .lobby-tagline{font-family:'Noto Serif JP',serif;color:#e5d7af;font-size:22px;letter-spacing:5px;margin:15px 0 5px}.lobby>p{font-size:13px}.lobby-cards{display:flex;gap:9px;margin:22px 0 36px}.lobby-cards span{display:grid;place-items:center;width:53px;height:74px;border-radius:6px;background:#f2eddf;color:#294634;font:24px Georgia;box-shadow:0 4px 0 #aca99e;transform:rotate(-8deg)}.lobby-cards span:nth-child(2){color:#b94442;transform:rotate(-4deg)}.lobby-cards span:nth-child(3){background:#dfc887;color:#665423;transform:translateY(-8px)}.lobby-cards span:nth-child(4){transform:rotate(4deg)}.lobby-cards span:nth-child(5){color:#b94442;transform:rotate(8deg)}.start-match{width:min(340px,100%);font-size:18px;padding:18px 25px;text-align:left;letter-spacing:3px}.start-match span{float:right}.lobby-links{display:flex;gap:12px;margin:16px 0 25px}.lobby>small{font-size:11px;color:#93a497}.match-nav{display:flex;gap:8px}#matchTitle:focus{outline:none}@media(max-width:650px){.lobby h1{font-size:39px;letter-spacing:5px}.lobby .lobby-tagline{font-size:18px}.match-nav{flex-direction:column}.match-nav button{font-size:10px;padding:7px 9px}}

#nameDialog{width:min(460px,92vw)}#nameForm{display:grid;gap:14px}#nameForm h2,#nameForm p{margin:0}#nameForm label{font-weight:700;margin-top:8px}#nameInput{font:inherit;background:#0e2119;color:#fff;border:1px solid #a4b5a4;border-radius:6px;padding:14px;width:100%}#nameInput:focus{outline:2px solid var(--gold)}#nameHelp{color:#a9b9b2}.name-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:12px}#playerName{overflow-wrap:anywhere}.river small{overflow-wrap:anywhere}