/* Senja di Serambi: illustrated dusk, porcelain panels and copper details. */
:root{color-scheme:dark;--cream:#fff0d8;--muted:#d8bca4;--gold:#f0bd72;--mint:#f4d7a5;--line:#efd0a82a}
body{background:#241b2b url('assets/serambi-senja.png') center center/cover fixed no-repeat;color:#fff0d8}
body:before{background:linear-gradient(180deg,#21182c4d,#25182b24 23%,#1c162648 75%,#171322b0);z-index:-1}
main{max-width:1390px;padding-top:17px;isolation:isolate}
main:before{content:'';position:absolute;z-index:-1;inset:83px 19px 33px;background:linear-gradient(180deg,#24182705,#25182a22 30%,#211a2b88);border-radius:28px;pointer-events:none}
.topbar{padding:0 5px 12px;border-bottom:1px solid #f3c28645}.brand{color:#ffe6b8;text-shadow:0 2px 4px #130d21}.brand small{color:#d8baa8}.brand-mark{color:#f4bd75}
.tools{gap:18px}.tools button{color:#f5debd;font-size:11px;text-shadow:0 1px 3px #171322}.tools .help-icon{border-color:#eac49999}.top-action{display:flex;align-items:center;gap:7px;padding:9px 0}.top-action>span{font-size:19px;color:#f7c784}.top-action:hover{color:#fff6de}
.intro{margin:13px 10px 8px;min-height:138px;align-items:center}.intro .eyebrow{font-size:8px;letter-spacing:2.8px;color:#ffe3ab;margin-bottom:0}.intro .eyebrow>span{background:#f2be71}
h1{margin:3px 0 0;line-height:1;letter-spacing:0}.title-art{display:block;width:435px;max-width:100%;height:auto;filter:drop-shadow(0 5px 4px #180b20a0);animation:titleArrive 1s cubic-bezier(.16,1,.3,1) both}.title-caption{margin:1px 0 0;text-align:center;font:600 9px var(--sans);letter-spacing:3px;color:#ffe6ad;text-shadow:0 2px 4px #180e24}
.intro-copy{font:400 23px/1.18 var(--serif);color:#f3d5bc;text-shadow:0 2px 6px #190b25;margin:0}.intro-copy em{color:#ffdfb8}.senja-label{font:700 7px var(--sans);letter-spacing:2.6px;color:#f3bf79;display:inline-block;margin-bottom:8px}
.scoreboard{margin:9px 6px 15px;grid-template-columns:1fr 148px 1fr;gap:24px}.score-card{position:relative;background:linear-gradient(110deg,#fbefdbf2,#e4c8aee8);color:#49322e;border:1px solid #fae6c1;border-bottom:3px solid #a36a46;box-shadow:0 8px 17px #160e2633,inset 0 1px 0 #fff;border-radius:12px;padding:11px 16px;cursor:pointer;transition:transform .2s,box-shadow .2s}.score-card:hover{transform:translateY(-2px);box-shadow:0 11px 20px #160e2655}.score-card:focus-visible{outline:3px solid #ffd295;outline-offset:4px}.score-card:after{content:'✎';position:absolute;right:8px;top:5px;font-size:9px;color:#9b6a50}.score-card.is-active{border-color:#fff0c7;background:linear-gradient(110deg,#fff6e7,#f3d8b2);box-shadow:0 0 0 2px #c8946655,0 9px 18px #160e264d}.avatar{color:#8b4e36;background:radial-gradient(ellipse,#fff1d4,#dfb887);border-color:#b77b4d;border-radius:10px;box-shadow:inset 0 0 0 3px #fff0d433;transform:rotate(-4deg)}.opponent .avatar{background:radial-gradient(ellipse,#b1b2ca,#655774);border-color:#796a8a;color:#fff1d4;transform:rotate(4deg)}.identity b{font-size:13px}.identity small{color:#987055}.actor-state{color:#8a6350;font-size:10px}.score-total{border-left-color:#a67d4c44}.score-total strong{color:#66432f;font-size:34px}.score-total small{color:#997052;font-size:7px}.round-card .eyebrow{color:#f5c482}.round-card b{color:#ffebcb;font-size:25px;text-shadow:0 2px 4px #190d24}.round-card>span:last-child{color:#d7b9a4}
.board-wrap{padding-bottom:13px;filter:drop-shadow(0 19px 14px #140c2490)}.board{background:linear-gradient(90deg,#341421bb,#bc754c27 27%,#e5b0691a 55%,#321529c7),url('assets/wood.jpg') center/cover;border-color:#b9824d;box-shadow:inset 0 4px 3px #ffe0a19c,inset 0 -9px 7px #27121dd9,0 7px 0 #5f2b25,0 11px 0 #291723;animation:boardArrive .9s .1s cubic-bezier(.16,1,.3,1) both}.board:after{border-color:#edc17b88;box-shadow:inset 0 0 0 4px #793e291a}.board:before{content:'';position:absolute;inset:14px;border:1px dashed #e8b36b45;border-radius:90px;pointer-events:none}.edge-pattern{color:#e5ba7a99}.lane-label{color:#f7d9b0b3}.pit{background:radial-gradient(ellipse at 50% 65%,#56342c,#221523 82%);border-color:#c28e57;box-shadow:inset 0 8px 12px #150b1bc7,0 2px 1px #e9bf8377}.pit.legal{border-color:#f2d39b;box-shadow:inset 0 8px 12px #150b1bb0,0 0 12px #ffbd631c,0 2px 1px #f1d49c88;animation:houseBreathe 3s ease-in-out infinite}.pit.legal:hover,.pit.legal:focus-visible{border-color:#fff1bf;box-shadow:inset 0 8px 12px #150b1ba0,0 0 20px #ffbc6966;transform:translateY(-4px)}.pit.active{border-color:#ffb963}.pit.active:before{border-color:#ffd29c}.pit.ai-active:before{border-color:#d4b4e8}.pit strong{font-size:13px;color:#fff0cf}.pit .number{color:#f2c58c99}.store{background:radial-gradient(ellipse at 50% 65%,#51302d,#211222 90%);border-color:#c38b50}.store strong{color:#ffdda0;font-size:35px}.store-label{color:#ffe4bcbf}.seed{background:radial-gradient(ellipse at 32% 24%,#fffef3,#f4e5ba 31%,#c8ab7c 70%,#7d5842);box-shadow:1px 2px 3px #100819cc,inset 0 1px 1px #fff9}.seed:nth-child(3n){background:radial-gradient(ellipse at 30% 20%,#ffb6a0,#ce5142 33%,#812c3b 75%,#491d31)}.flying-seed{background:radial-gradient(ellipse at 32% 25%,#fffae1,#f1d9ac 35%,#b78c5b);box-shadow:0 3px 6px #160c27b0}.pit.burned{background:repeating-linear-gradient(45deg,#241725,#241725 5px,#50313a 6px,#50313a 7px)}
.hud{position:relative;border-color:#f5d9b5;background:linear-gradient(115deg,#fff1dceF,#edd3b4f5);color:#4e342e;border-radius:13px;box-shadow:0 9px 22px #190e293b,inset 0 1px 0 #fff;margin-top:14px;padding:14px 21px}.turn-emblem{background:linear-gradient(145deg,#cf8f57,#a36245);border-color:#f7d3a3;color:#fff2d1;border-radius:10px;box-shadow:0 3px 6px #693d3326}.hud-title b{color:#604131;font-size:14px}.hud p{color:#967052;font-size:11px}.phase-badge{border-color:#b17a4e55;color:#a16c45;background:#e7c49b4d;font-size:7px}.hand{color:#805c43;border-left-color:#b4875744}.hand-icon{color:#a97746}.hand.empty{opacity:.55}.hand small{color:#a27855}.turn-help{position:absolute;right:-6px;top:-9px;width:23px;height:23px;border-radius:50%;background:#614c70;color:#f7e0c1;border:1px solid #d6b2aa;box-shadow:0 2px 5px #17102566;font-size:11px}.turn-help:hover{background:#90677d}.interaction-hint{color:#ecd0ae;text-shadow:0 1px 3px #1a0e25;font-size:10px}.hint-line{background:linear-gradient(90deg,transparent,#e4b57d88)}
.control-bar{border-top-color:#e7bd9433}.mode-control>label,.pace-control>span{color:#d9baa1;font-size:8px}.select-wrap>span{color:#efd2aa}select{background:#34243c;border-color:#ac7e6c88;color:#ffe4bf;font-size:11px}.segmented{background:#2a203bdd;border-color:#ac7e6c88}.segmented button{color:#d8bca8;font-size:10px}.segmented button.selected{background:linear-gradient(180deg,#e8bc80,#c58c5a);color:#4d2c2b;box-shadow:0 1px 4px #120d24}.segmented button:hover{background:#c7946d4d;color:#fff1d6}.restart{color:#f2d4b4;font-size:11px}.restart:hover{color:#fff3cf}footer{border-color:#e7bd9433;color:#cfae98}.footer-note{color:#d0ad94}.keyboard-hint{color:#c9a78e}kbd{color:#e9caa3;border-color:#c69b6d66}footer button{color:#ddbd9c}
.primary{color:#4a2c2a;background:linear-gradient(180deg,#f0c990,#d49e61);border-color:#ffe2ae;box-shadow:inset 0 1px 0 #fff5,0 3px 6px #160c2326}.primary:hover{color:#3d2626;background:linear-gradient(180deg,#ffdfa5,#e4b779)}.capture-toast{color:#fff0d6;background:linear-gradient(120deg,#844735,#593451);border-color:#edbd82;padding:13px 27px;font-size:14px;box-shadow:0 8px 25px #140d2688}.capture-toast.visible{animation:toastBloom .6s cubic-bezier(.16,1,.3,1) both}
dialog{background:linear-gradient(135deg,#fff1dc,#e9cdb1);color:#503630;border:1px solid #ffe5bf;box-shadow:0 30px 100px #100b29b3,inset 0 0 0 5px #ad7c4e13;scrollbar-color:#bd946b #efdbbf;animation:popupIn .28s cubic-bezier(.16,1,.3,1)}dialog::backdrop{background:#171024b8;backdrop-filter:blur(8px)}dialog h2{color:#5a3c32}dialog h3{color:#6b4535}dialog p{color:#96725a}dialog .eyebrow{color:#b47c45}.close{color:#966c51;border:1px solid #b88b6044;border-radius:50%;width:31px;height:31px;font:22px var(--serif);display:grid;place-items:center;padding:0}.close:hover{background:#c99e7033;color:#6b4233}.rule-grid>div>span{color:#b9844d}.rule-footnote{border-top-color:#ac81502e;color:#a17c5c!important}.result-scores{border-color:#b58d5f33}.result-scores strong{color:#795036}.result-scores>div>span{color:#ad8058}.result-divider{color:#bb9167}.result-ornament{color:#b47b43}.result-dialog>.text-button,.small-dialog>.text-button{color:#9b7356}.result-dialog>.text-button:hover{color:#6c4536}.score-pop{animation:seedScore .45s ease-out}
.mixer-track{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:20px 0 15px;border-top:1px solid #ac81502e}.mixer-track b{font-size:13px;color:#704a37}.mixer-track small{display:block;font-size:9px;line-height:1.7;color:#aa8362;margin-top:5px}.mixer-track button{border:1px solid #b3845a;border-radius:6px;padding:9px 13px;color:#704a37;background:#f6e4c9;white-space:nowrap;font-size:10px}.mixer-track button[aria-pressed=true]{background:#6a4b5d;color:#fff0d5;border-color:#6a4b5d}.slider-label{display:flex;justify-content:space-between;font-size:9px;letter-spacing:1px;color:#a37550;margin:14px 0}.slider-label output{color:#6b4534;letter-spacing:0}input[type=range]{width:100%;accent-color:#9b6348;cursor:pointer;margin:0 0 25px}
.name-input{font:600 28px var(--sans);letter-spacing:10px;text-align:center;width:100%;border:1px solid #be9871;border-radius:8px;background:#fff7e9;color:#664438;padding:13px 10px 13px 20px;outline:none;text-transform:uppercase}.name-input:focus{border-color:#8f5b4d;box-shadow:0 0 0 3px #a6756040}.name-input:invalid:not(:placeholder-shown){border-color:#bb6656}.form-feedback{font-size:10px!important;min-height:19px;color:#a37150!important}.form-feedback.success{color:#77589c!important}.record-form{border-top:1px solid #b58d5f33;margin:20px 0 0;padding:20px 0 4px}.record-form>label{display:block;font-size:8px;letter-spacing:1.2px;color:#a37550;margin-bottom:12px}.record-form>div{display:flex;gap:10px}.record-form input{font-size:19px;letter-spacing:5px;min-width:0;padding:10px}.record-form .primary{white-space:nowrap;padding:10px 15px;gap:0}.record-form button:disabled{opacity:.6;cursor:default}.record-summary{display:flex;gap:45px;border-top:1px solid #b58d5f33;border-bottom:1px solid #b58d5f33;margin:25px 0 20px;padding:15px 0}.record-summary>div{display:flex;align-items:center;gap:12px}.record-summary strong{font:500 38px var(--serif);color:#86573a}.record-summary span{font-size:7px;letter-spacing:1px;color:#b08560;max-width:60px;line-height:1.8}.record-tabs{display:flex;border-bottom:1px solid #ad815744;gap:20px;margin:0 0 17px}.record-tabs button{color:#a47d5b;padding:12px 0;font-size:12px;border-bottom:2px solid transparent}.record-tabs button[aria-selected=true]{color:#784833;border-bottom-color:#a96945}.records-dialog{max-width:660px}.record-empty{padding:35px 15px;text-align:center;border:1px dashed #bd966d77;border-radius:10px}.record-empty>span{font-size:34px;color:#b98c58}.record-empty h3{font:500 27px var(--serif);margin:9px 0}.record-empty p{font-size:11px;margin:0}.record-row{display:grid;grid-template-columns:30px 1fr 60px 60px 55px;align-items:center;gap:8px;border-bottom:1px solid #c29c7233;padding:14px 2px;font-size:11px;color:#996c4b}.record-row strong{font-size:13px;letter-spacing:2px;color:#704737}.record-row .rank{font:500 25px var(--serif);color:#b48654}.record-row.header{font-size:7px;letter-spacing:1px;padding-top:3px;padding-bottom:9px;color:#b18c68}.record-row:first-of-type .rank{color:#a56536}.record-row .points{font-weight:800;color:#80533a}.history-row{display:flex;align-items:center;gap:15px;padding:15px 0;border-bottom:1px solid #c29c7233}.history-badge{width:34px;height:34px;border:1px solid #ac825744;border-radius:8px;display:grid;place-items:center;color:#925d45;font-size:17px}.history-row b{color:#704737;font-size:11px;letter-spacing:1px}.history-row small{display:block;color:#b18c68;font-size:9px;margin-top:5px}.history-score{margin-left:auto;font:500 28px var(--serif);color:#8b5a3d;white-space:nowrap}.turn-steps{margin:22px 0}.turn-steps>div{display:flex;gap:15px;align-items:center;border-top:1px solid #b58d5f33;padding:11px 0}.turn-steps span{font:italic 24px var(--serif);color:#ae7a4c}.turn-steps p{font-size:11px;margin:0}.confetti{position:fixed;pointer-events:none;z-index:100;width:7px;height:11px;background:#e7b66c;border-radius:1px}
@keyframes titleArrive{from{opacity:0;transform:translateY(-15px) scale(.95)}to{opacity:1;transform:none}}@keyframes boardArrive{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}@keyframes popupIn{from{opacity:0;transform:translateY(18px) scale(.96)}to{opacity:1;transform:none}}@keyframes toastBloom{from{opacity:0;transform:translate(-50%,-50%) scale(.75)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}@keyframes seedScore{0%,100%{transform:scale(1)}40%{transform:scale(1.3);color:#bd6d3e}}@keyframes houseBreathe{0%,100%{filter:brightness(1)}50%{filter:brightness(1.11)}}
@media(min-width:761px) and (max-height:850px){main{padding-top:12px}.topbar{padding-bottom:8px}.intro{margin:8px 10px 4px;min-height:124px}.title-art{width:380px}.scoreboard{margin-top:6px;margin-bottom:12px}.score-card{padding:8px 14px}.hud{padding:12px 18px;min-height:70px;margin-top:11px}.interaction-hint{min-height:32px}.control-bar{padding-top:9px}footer{margin-top:13px;padding-top:9px}}
@media(max-width:1000px){.scoreboard{grid-template-columns:1fr 105px 1fr;gap:12px}.tools{gap:14px}.tools button{font-size:10px}.title-art{width:360px}.intro-copy{font-size:20px}}
@media(max-width:760px){body{background-position:center top}.tools{gap:12px}.topbar .brand{font-size:8px;letter-spacing:1.3px}.topbar .brand small{font-size:6px;letter-spacing:1px}.tools .top-action{font-size:0;gap:0}.tools .top-action>span{font-size:22px}.tools #rules{font-size:0;gap:0}.tools .help-icon{font-size:12px}.tools .icon-button{display:none}.intro{margin:20px 0 13px;min-height:0}.title-art{width:340px}.title-caption{font-size:7px;margin-top:6px}.intro .eyebrow{font-size:7px;letter-spacing:1.5px}.intro-copy{font-size:17px}.scoreboard{grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}.score-card{padding:10px}.identity b{font-size:11px}.score-total strong{font-size:30px}.score-total small{font-size:6px}.round-card{grid-row:2;grid-column:1/3}.round-card b{font-size:23px}.round-card>span:last-child{border-color:#d5aa7b44}.hud{padding:14px;gap:10px}.hud-title b{font-size:12px}.hud p{font-size:10px}.interaction-hint{font-size:9px}.segmented button{font-size:9px}.record-summary{gap:25px}.record-summary span{font-size:6px}.record-row{grid-template-columns:25px 1fr 40px 40px 40px;gap:5px}.record-row.header{font-size:6px;letter-spacing:.5px}.record-row strong{font-size:12px}.control-bar select{font-size:10px}.restart{font-size:10px}.top-action{min-width:26px;justify-content:center}}
@media(max-width:520px){.intro{display:block;text-align:center;margin:18px 0 16px}.intro>div{width:100%}.title-art{width:100%;max-width:340px;margin:auto}.intro .eyebrow{margin-bottom:9px}.title-caption{margin-top:6px}.intro-copy{display:none}.board{height:555px}.store strong{font-size:30px}.score-card{padding:10px 9px}.score-total{padding-left:7px}.score-total small{font-size:5px}.identity b{font-size:11px}.phase-badge{font-size:6px}.hud-title{gap:6px}.hud .turn-emblem{width:31px;height:31px}.control-bar{border-color:#e7bd9433}.restart{border-top-color:#e7bd9433}.record-form>div{flex-wrap:wrap}.record-form input{flex:1;min-width:130px}.record-form .primary{flex:1;justify-content:center}.records-dialog h2{font-size:36px}.name-input{font-size:25px}.record-summary strong{font-size:32px}.history-score{font-size:24px}.history-row{gap:10px}.history-row b{font-size:10px}.history-row small{font-size:8px}.record-row strong{letter-spacing:1px}.tools .top-action{padding:9px 2px}}
.record-row small{display:block;font-size:9px;letter-spacing:0;color:#b38c68;margin-top:4px}.record-row strong{display:block}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.confetti{display:none}}