:root{color-scheme:dark;--ink:#f5f4ec;--muted:#abb4ae;--night:#08100d;--panel:#121c17;--line:#2d4137;--lime:#c9f45b;--mint:#70d7aa;--red:#d85557;--display:"Arial Black","Helvetica Neue",Arial,sans-serif;--body:Inter,system-ui,sans-serif}*{box-sizing:border-box}html{min-width:280px;background:var(--night)}body{margin:0;color:var(--ink);background:radial-gradient(circle at 80% 4%,rgba(112,215,170,.12),transparent 30rem),var(--night);font-family:var(--body);line-height:1.5}a{color:inherit}button{font:inherit}.site-header,main,footer{width:min(1080px,calc(100% - 36px));margin:auto}.site-header{display:flex;align-items:center;justify-content:space-between;min-height:78px;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:10px;font-weight:850;text-decoration:none}.brand span{display:grid;width:34px;aspect-ratio:1;place-items:center;color:var(--night);background:var(--lime);border-radius:9px;font-family:var(--display)}.site-header p{margin:0;color:var(--muted);font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.intro{display:grid;grid-template-columns:1.1fr 1fr;gap:50px;align-items:end;padding:50px 0 30px}.intro>p{margin:0;color:var(--muted)}.eyebrow{margin:0 0 8px;color:var(--mint);font-size:.72rem;font-weight:850;letter-spacing:.16em;text-transform:uppercase}h1,h2,p{margin-top:0}h1{margin-bottom:0;font:clamp(3.1rem,7vw,5.5rem)/.84 var(--display);letter-spacing:-.07em}.game-shell{overflow:hidden;background:var(--panel);border:1px solid var(--line);border-radius:18px}.toolbar{display:grid;grid-template-columns:auto auto 1fr auto auto auto;gap:11px;align-items:center;padding:11px 14px}.toolbar>div{display:grid}.toolbar small{color:var(--muted);font-size:.55rem;font-weight:850;text-transform:uppercase}.toolbar strong{color:var(--lime);font:900 1.15rem/1 ui-monospace,monospace}.toolbar p{margin:0;color:var(--muted);font-size:.74rem;text-align:center}.toolbar button{min-height:40px;padding:0 10px;color:var(--ink);background:#0d1511;border:1px solid #506157;border-radius:8px;font-size:.72rem;font-weight:800;cursor:pointer}.toolbar button:disabled{opacity:.4}.board{position:relative;width:100%;aspect-ratio:6/5;background:radial-gradient(circle at 50% 50%,rgba(112,215,170,.08),transparent 65%),#0b1511;border-top:1px solid var(--line);touch-action:manipulation}.tile{position:absolute;left:calc(1.5% + var(--x)*8.05%);top:calc(4% + var(--y)*8.5%);z-index:calc(2 + var(--z));display:grid;width:8%;height:14%;padding:3px;place-items:center;color:#18201c;background:linear-gradient(135deg,#fffdf2,#d9dacd);border:1px solid #b7baa9;border-radius:7px;box-shadow:3px 5px 0 #66726b,5px 7px 8px rgba(0,0,0,.3);cursor:pointer}.tile.layer{transform:translate(5px,-5px);box-shadow:5px 7px 0 #526058,7px 10px 10px rgba(0,0,0,.36)}.tile.free{outline:2px solid var(--mint);outline-offset:-3px}.tile.selected{color:#10180e;background:var(--lime);outline:3px solid white;transform:translateY(-5px)}.tile.layer.selected{transform:translate(5px,-10px)}.tile b{font:900 clamp(.62rem,2vw,1.15rem)/1 var(--display)}.tile small{font-size:clamp(.32rem,.75vw,.55rem);line-height:1;text-align:center}.tile[data-match="Rd"] b{color:var(--red)}.tile[data-match="Gd"] b{color:#328b5e}.rules{display:grid;grid-template-columns:1fr 1.15fr;gap:65px;padding:70px 0}.rules h2{font:clamp(2rem,5vw,3.5rem)/.95 var(--display);letter-spacing:-.05em}.rules p{color:var(--muted)}footer{display:flex;justify-content:space-between;padding:24px 0 38px;border-top:1px solid var(--line);color:var(--muted);font-size:.78rem}footer a{font-weight:800;text-decoration:none}footer p{margin:0}@media(max-width:700px){.intro{display:block;padding:36px 0 24px}.intro>p{margin-top:16px}.toolbar{grid-template-columns:auto auto 1fr auto}.toolbar p{grid-column:1/-1;grid-row:2}.toolbar button{padding:0 7px;font-size:.63rem}.board{aspect-ratio:6/6.2}.tile{height:14%;border-radius:4px;box-shadow:2px 3px 0 #66726b}.tile b{font-size:clamp(.48rem,3vw,.72rem)}.tile small{display:none}.tile.layer{transform:translate(3px,-3px)}.tile.layer.selected{transform:translate(3px,-7px)}.rules{display:block;padding:48px 0}.rules>div+div{margin-top:22px}footer{display:block}footer p{margin-top:8px}}
@media(max-width:700px){.toolbar{grid-template-columns:repeat(3,1fr)}.toolbar>div{justify-self:center}.toolbar button{grid-row:3}.toolbar #undo{grid-column:1}.toolbar #restart{grid-column:2}.toolbar #new-layout{grid-column:3}}

/* Original tile faces: circles, bamboo, characters, honors, flowers, and seasons. */
.face{display:grid;width:88%;height:70%;place-content:center}.circles,.bamboo{grid-template:repeat(3,1fr)/repeat(3,1fr);gap:5%;align-items:center;justify-items:center}.pip{display:block;width:74%;aspect-ratio:1;border:clamp(1px,.18vw,2px) solid currentColor;border-radius:50%;background:radial-gradient(circle,currentColor 0 16%,transparent 18% 38%,currentColor 40% 53%,transparent 55%)}.pip.p0{color:#c94348}.pip.p1{color:#24775e}.pip.p2{color:#245c91}.stick{position:relative;display:block;width:36%;height:92%;min-height:5px;background:linear-gradient(90deg,#236a4d 0 24%,#68aa70 25% 72%,#236a4d 73%);border-radius:45%}.stick::before,.stick::after{content:"";position:absolute;left:50%;width:150%;height:9%;background:#206748;border-radius:50%;transform:translateX(-50%)}.stick::before{top:31%}.stick::after{bottom:31%}.stick.s1{background:linear-gradient(90deg,#a93e42 0 24%,#db716c 25% 72%,#a93e42 73%)}.stick.s1::before,.stick.s1::after{background:#9f373e}.bird{width:82%;height:82%}.bird svg{width:100%;height:100%}.characters{height:74%;grid-template:1fr 1fr/1fr;line-height:.9}.characters i,.characters b,.honor b,.bonus b{font-family:"BiauKai","標楷體","DFKai-SB","KaiTi","STKaiti","Kaiti TC","Noto Serif CJK TC","PMingLiU",serif;font-style:normal;font-weight:600}.characters i,.characters b{font-size:clamp(.78rem,4vw,2.4rem)}.characters i{color:#263c7d}.characters b{color:#ba4145}.honor{height:72%}.honor b{font-size:clamp(1rem,5.3vw,3.35rem);line-height:1}.honor.Rd b{color:#c93f43}.honor.Gd b{color:#247958}.honor.Wd{width:66%;height:62%;border:clamp(1px,.2vw,2px) solid #397198;border-radius:2px}.honor.Wd b{font-size:0}.bonus{width:84%;height:91%;grid-template-rows:auto minmax(0,1fr);gap:1px;align-items:center}.bonus b{color:#263c7d;font-size:clamp(.62rem,1.7vw,1.05rem);line-height:1}.bonus svg{display:block;width:100%;height:100%;min-height:0}
@media(max-width:700px){.circles,.bamboo{gap:3%}.characters{height:74%}.characters i,.characters b{font-size:clamp(.72rem,3.6vw,.95rem)}.honor b{font-size:clamp(1rem,5.8vw,1.42rem)}.bonus b{font-size:clamp(.5rem,2.5vw,.66rem)}}

/* Accumulated tier offsets and deep tile edges make all four levels readable. */
.tile{--depth-x:0px;--depth-y:0px;--lift:0px;background:linear-gradient(145deg,#fffef8 0 62%,#e4e4d9 100%);border-color:#aeb2a7;border-top-color:#fff;border-left-color:#f5f4e9;box-shadow:0 2px 0 #b5baae,0 5px 0 #747d75,3px 9px 10px rgba(0,0,0,.42);transform:translate(var(--depth-x),calc(var(--depth-y) + var(--lift)))}.tile.level-1{--depth-x:6px;--depth-y:-8px}.tile.level-2{--depth-x:12px;--depth-y:-16px}.tile.level-3{--depth-x:18px;--depth-y:-24px}.tile.layer{box-shadow:0 2px 0 #b0b5aa,0 6px 0 #626c64,4px 11px 13px rgba(0,0,0,.5);transform:translate(var(--depth-x),calc(var(--depth-y) + var(--lift)))}.tile.selected,.tile.layer.selected{--lift:-5px;transform:translate(var(--depth-x),calc(var(--depth-y) + var(--lift)))}
@media(max-width:700px){.tile{box-shadow:0 1px 0 #b5baae,0 3px 0 #747d75,2px 5px 6px rgba(0,0,0,.42)}.tile.level-1{--depth-x:3px;--depth-y:-4px}.tile.level-2{--depth-x:6px;--depth-y:-8px}.tile.level-3{--depth-x:9px;--depth-y:-12px}.tile.layer{box-shadow:0 1px 0 #b0b5aa,0 4px 0 #626c64,2px 7px 8px rgba(0,0,0,.5)}}

/* Tiles within one tier sit on a true grid; only higher tiers may overlap them. */
.board{aspect-ratio:1/1}.tile{left:calc(2% + var(--x)*8%);top:calc(1% + var(--y)*10.8%);width:7.55%;height:10.2%}.tile.selected,.tile.layer.selected{--lift:0px}
@media(max-width:700px){.board{aspect-ratio:1/1.04}}

/* Compact play area: shorter faces, no captions, and tier-specific depth. */
.site-header{min-height:58px}.intro{grid-template-columns:auto 1fr;gap:32px;padding:20px 0 16px;align-items:center}.intro h1{white-space:nowrap;font-size:clamp(2.4rem,4.2vw,3.6rem);line-height:.9}.board{height:clamp(440px,calc(100vh - 250px),620px);aspect-ratio:auto}.tile{top:calc(-11.2% + var(--y)*12.35%);height:11.75%;padding:2px;background:linear-gradient(140deg,#fffffb 0 58%,#f2f2e9 72%,#d4d8ce 100%);border-top-color:#fff;border-left-color:#f8f8f0;border-right-color:#9ea69e;border-bottom-color:#737d75}.tile>.face{height:90%}.tile.level-0{box-shadow:inset 1px 1px 0 rgba(255,255,255,.9),0 2px 0 #b8bdb1,0 4px 0 #68736b,2px 7px 8px rgba(0,0,0,.38)}.tile.level-1{box-shadow:inset 1px 1px 0 rgba(255,255,255,.9),0 2px 0 #b4b9ad,0 5px 0 #59655d,3px 9px 10px rgba(0,0,0,.46)}.tile.level-2{box-shadow:inset 1px 1px 0 rgba(255,255,255,.9),0 2px 0 #aeb4a8,0 6px 0 #4d5951,4px 11px 12px rgba(0,0,0,.54)}.tile.level-3{box-shadow:inset 1px 1px 0 rgba(255,255,255,.9),0 2px 0 #a8aea3,0 7px 0 #414d45,5px 14px 15px rgba(0,0,0,.62)}.characters{height:82%}.honor{height:82%}.bonus{height:94%}
@media(max-width:700px){.site-header{min-height:50px}.intro{display:grid;grid-template-columns:1fr;gap:7px;padding:12px 0 10px}.intro .eyebrow{margin-bottom:4px}.intro h1{white-space:normal;font-size:clamp(2rem,9vw,2.5rem);line-height:.9}.intro>p{margin:0;font-size:.86rem;line-height:1.4}.toolbar{grid-template-columns:auto auto 1fr;gap:8px;padding:8px 10px}.toolbar p{grid-column:3;grid-row:1}.toolbar button{grid-row:2;min-height:36px}.board{height:clamp(240px,38vh,310px);aspect-ratio:auto}.tile{top:calc(-11.2% + var(--y)*12.35%);height:11.75%;padding:1px}.tile.level-0{box-shadow:inset 1px 1px 0 rgba(255,255,255,.9),0 1px 0 #b8bdb1,0 3px 0 #68736b,1px 5px 5px rgba(0,0,0,.38)}.tile.level-1{box-shadow:inset 1px 1px 0 rgba(255,255,255,.9),0 1px 0 #b4b9ad,0 3px 0 #59655d,2px 6px 6px rgba(0,0,0,.46)}.tile.level-2{box-shadow:inset 1px 1px 0 rgba(255,255,255,.9),0 1px 0 #aeb4a8,0 4px 0 #4d5951,2px 7px 7px rgba(0,0,0,.54)}.tile.level-3{box-shadow:inset 1px 1px 0 rgba(255,255,255,.9),0 1px 0 #a8aea3,0 5px 0 #414d45,3px 9px 9px rgba(0,0,0,.62)}}