:root{--bg:#0e2423;--panel:#173532;--card:#1d403c;--edge:rgba(173,239,214,.14);--text:#ebfff7;--muted:#a1c9bd;--mint:#b5f1c6;--mint2:#81dcae;--orange:#f8d49d}
.ambient-one{background:rgba(72,173,132,.14)}.ambient-two{background:rgba(74,130,139,.1)}
.brand,.brand .brand-light{color:#baf3cc}.brand-logo{display:inline-block;font-size:29px;margin-right:5px}
.eyebrow,.card-eyebrow{color:#8fe2bb}.eyebrow-line,.live-dot{background:#a2efc5}
.hero h1 em{color:#b8f0c5}
.primary-button{background:#b6f3cc;border-color:#b6f3cc;color:#14382d;box-shadow:0 10px 27px rgba(90,210,145,.12)}
.primary-button:hover{background:#d6ffe6}.arcade-link:hover,.footer a:hover{color:#baf2ce}
.chapter-tab.active,.chapter-tab:hover{background:#b6f3cc;border-color:#b6f3cc;color:#173a30}
.level-card{background:linear-gradient(140deg,#224e49,#193b39)}
.level-card.complete{background:linear-gradient(145deg,#327255,#245044);border-color:rgba(159,241,176,.44)}
.level-card-head strong{color:#b2efd0}
.play-panel{background:linear-gradient(160deg,#204842,#143330)}
.info-card{background:rgba(33,75,67,.7)}.info-card.pale{background:rgba(89,164,130,.09)}
.game-stats .star-value,.level-card-bottom span{color:#f8d99c}
.match-track>div{background:linear-gradient(90deg,#71cfa8,#c6f6c8)}
.visual-callout{background:#d3ffe4;color:#285a46}.visual-callout strong{color:#1b4a32}
.info-card h3{color:#e7fff0}.tip-sub{color:#87c5ab!important}
.area-preview{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;width:300px;padding:12px;border-radius:24px;background:#234940;border:1px solid rgba(171,240,201,.24);transform:rotate(-9deg);box-shadow:0 25px 55px rgba(0,0,0,.28)}
.area-preview .sample{aspect-ratio:1;display:grid;place-items:center;border-radius:9px;font:900 30px Outfit;color:#fffefa}
.area-preview .sample.a{background:#477a85}.area-preview .sample.b{background:#846783}.area-preview .sample.c{background:#477c67}.area-preview .sample.d{background:#a0745e}.area-preview .sample.e{background:#55739d}
.area-board{--cols:4;display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:5px;max-width:555px;margin:auto;touch-action:none;user-select:none;-webkit-user-select:none}
.area-tile{position:relative;display:grid;place-items:center;aspect-ratio:1;min-width:0;padding:3px;overflow:visible;isolation:isolate;border:1px solid rgba(185,241,219,.31);border-radius:9px;background:#2b544d;color:#e8fff7;cursor:crosshair;transition:background .12s,border-color .12s}
.area-tile:hover{border-color:#e5f8d8}
.area-tile .area-number{position:relative;z-index:3;font:900 clamp(19px,3vw,38px)/1 Outfit,"Malgun Gothic",sans-serif;letter-spacing:-.05em;text-shadow:0 1px 2px rgba(0,0,0,.19)}
.area-tile .area-number.small{font-size:clamp(15px,2.7vw,33px)}
.area-tile.placed{background:hsl(var(--hue) 43% 35%);border-color:hsl(var(--hue) 65% 64%);cursor:pointer}
.area-tile.placed .area-number{color:white}
.area-tile.preview{background:#a3dabc;color:#21443a;border-color:#d5ffe2;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.area-tile.preview.invalid{background:#ab6268;color:#ffe6e7;border-color:#f3acaa}
.area-tile.preview .area-number{color:inherit}
.area-tile.hint{box-shadow:0 0 0 2px #ffe3a0,inset 0 0 0 2px rgba(255,227,160,.5);border-color:#ffe3a0}
.area-tile.placed::before,.area-tile.placed::after{content:"";position:absolute;pointer-events:none;background:hsl(var(--hue) 43% 35%);z-index:1}
.area-tile.join-right::after{right:-6px;width:7px;top:3px;bottom:3px}
.area-tile.join-bottom::before{bottom:-6px;height:7px;left:3px;right:3px}
.area-tile .tile-label{position:absolute;bottom:4px;right:5px;color:rgba(235,255,242,.55);font:750 8px Outfit}
.area-board[data-size="8"] .area-tile .area-number{font-size:clamp(15px,2.45vw,26px)}
.area-board[data-size="7"] .area-tile .area-number{font-size:clamp(17px,2.6vw,29px)}
.match-area{max-width:555px;margin:14px auto 2px}
#status{position:static!important;width:auto!important;height:auto!important;overflow:visible!important;clip:auto!important;white-space:normal!important;margin:14px auto 0!important;color:#b0d5c5;font-size:12px;line-height:1.6}
.area-example{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin:18px 0;width:min(100%,210px)}
.area-example span{aspect-ratio:1;background:#447c6a;border:1px solid #7bd6af;border-radius:7px;display:grid;place-items:center;font:900 21px Outfit;color:#eaffee}
.area-example span:nth-child(4),.area-example span:nth-child(5),.area-example span:nth-child(6){background:#447c6a}
@media(max-width:650px){
 .area-preview{width:235px}.area-preview .sample{font-size:26px}
 .area-board{gap:4px}
 .area-tile{border-radius:6px}
 .area-tile .area-number{font-size:clamp(20px,6.4vw,34px)}
 .area-board[data-size="7"] .area-tile .area-number{font-size:clamp(15px,4.6vw,23px)}
 .area-board[data-size="8"] .area-tile .area-number{font-size:clamp(14px,3.9vw,21px)}
 .area-tile.join-right::after{right:-5px;width:6px}
 .area-tile.join-bottom::before{bottom:-5px;height:6px}
}
@media(max-width:390px){.area-board{gap:3px}.area-board[data-size="8"] .area-tile .area-number{font-size:14px}.area-tile.join-right::after{right:-4px;width:5px}.area-tile.join-bottom::before{bottom:-4px;height:5px}}