:root{--ink:#edf5ff;--muted:#a5b7d2;--line:rgba(105,171,255,.4);--gold:#e9be68}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}body{margin:0;min-height:100svh;color:var(--ink);font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;background:#050b19 url("assets/cosmic-arena.png") center top/cover fixed no-repeat}body:before{content:"";position:fixed;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(3,9,25,.16),rgba(3,7,20,.42))}button{font:inherit;cursor:pointer;border:0}.game-shell{width:min(100%,550px);min-height:100svh;margin:auto;padding:max(17px,env(safe-area-inset-top)) 16px max(24px,env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center}.topbar{width:100%;height:54px;display:flex;align-items:center;justify-content:center;position:relative;margin-bottom:9px}.brand{display:flex;gap:9px;align-items:center;font-family:Georgia,"STSong",serif;font-size:clamp(25px,7vw,35px);font-weight:800;letter-spacing:.11em;color:#f3e7c7;text-shadow:0 0 14px rgba(96,183,255,.9),0 2px #48340f}.planet{width:27px;height:27px;display:grid;place-items:center;border:1px solid #f6d787;border-radius:50%;font-size:14px;color:#fff4ca;box-shadow:0 0 12px #52aaff,inset 0 0 9px #1e67ca}.icon-button{position:absolute;right:0;width:42px;height:42px;border:1px solid #7dc2ff;border-radius:50%;background:radial-gradient(circle at 40% 30%,#346fae,#0d1d4d 68%);box-shadow:0 0 14px rgba(43,153,255,.72),inset 0 0 8px #69c1ff;display:flex;align-items:center;justify-content:center;gap:5px}.icon-button i{display:block;width:4px;height:17px;background:#eaf8ff;border-radius:4px;box-shadow:0 0 6px white}.status-panel{position:relative;width:100%;min-height:76px;display:grid;grid-template-columns:64px 72px 1fr 1fr 1fr;align-items:center;padding:7px 8px;border:1px solid var(--line);background:linear-gradient(105deg,rgba(6,17,43,.93),rgba(19,42,84,.84));clip-path:polygon(13px 0,calc(100% - 13px) 0,100% 13px,100% calc(100% - 13px),calc(100% - 13px) 100%,13px 100%,0 calc(100% - 13px),0 13px);box-shadow:0 0 25px rgba(20,116,255,.22),inset 0 0 24px rgba(19,88,169,.22)}.avatar{width:55px;height:55px;border-radius:50%;background:#0b142a url("assets/zicong-avatar.png") 3% 31%/440% no-repeat;border:2px solid #51b2ff;box-shadow:0 0 0 3px #0e2450,0 0 14px #349dfd}.level{height:47px;display:flex;justify-content:center;align-items:center;gap:3px;color:#ecf6ff;border-left:1px solid rgba(116,174,255,.26);border-right:1px solid rgba(116,174,255,.26);background:transparent;text-shadow:0 0 7px #39a7ff}.level strong{font:30px Georgia,serif;color:#f0c96f}.level small{font-size:13px;font-weight:700}.stat{text-align:center;min-width:0}.stat span{display:block;font-size:11px;color:#aabbd7;font-weight:700;letter-spacing:.08em}.stat b{display:block;margin-top:3px;font:700 23px Georgia,serif;color:#f2ca70;text-shadow:0 0 10px rgba(246,192,83,.4)}.stat:nth-of-type(4) b{color:#77c7ff}.divider{display:none}.game-area{width:100%;margin:auto 0 9px}.board-frame{padding:8px;background:linear-gradient(135deg,#d8b969,#4368a2 18%,#152445 48%,#6f9dd7 82%,#ddbe70);clip-path:polygon(14px 0,calc(100% - 14px) 0,100% 14px,100% calc(100% - 14px),calc(100% - 14px) 100%,14px 100%,0 calc(100% - 14px),0 14px);box-shadow:0 0 0 1px rgba(241,207,121,.7),0 12px 30px rgba(0,0,0,.42),0 0 25px rgba(34,124,255,.35)}.board{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;padding:6px;background:radial-gradient(circle at 50% 0,#213d70,#080e21 72%);touch-action:none;user-select:none}.tile{aspect-ratio:1;min-width:0;position:relative;overflow:hidden;border-radius:8px;background:linear-gradient(145deg,#1d365d,#0c162c);box-shadow:inset 0 1px rgba(184,218,255,.23),inset 0 -2px 5px rgba(0,0,0,.6);transition:transform .18s,filter .18s,opacity .18s}.tile:after{content:"";position:absolute;inset:8%;border-radius:50%;background-image:var(--avatar);background-size:var(--avatar-size,440%);background-repeat:no-repeat;background-position:var(--avatar-pos,3% 31%);box-shadow:0 0 0 1px rgba(214,236,255,.9),0 0 8px var(--glow),inset 0 0 7px rgba(255,255,255,.26);filter:contrast(1.05) saturate(1.12)}.tile[data-type="0"]{--avatar:url("assets/zicong-avatar.png");--avatar-size:440%;--avatar-pos:3% 31%;--glow:#3ba9ff}.tile[data-type="1"]{--avatar:url("assets/avatar-wife.png");--avatar-size:440%;--avatar-pos:3% 31%;--glow:#f3bc61}.tile[data-type="2"]{--avatar:url("assets/avatar-child.png");--avatar-size:440%;--avatar-pos:3% 31%;--glow:#d9ecff}.tile[data-type="3"]{--avatar:url("assets/avatar-tiger.png");--avatar-size:510%;--avatar-pos:1% 16%;--glow:#7760ff}.tile[data-type="4"]{--avatar:url("assets/avatar-qilin.png");--avatar-size:500%;--avatar-pos:1% 18%;--glow:#e9b654}.tile.selected{z-index:2;transform:scale(.88);outline:2px solid #f4ce72;filter:brightness(1.32)}.tile.matched{animation:pop .32s ease forwards}.tile.falling{animation:land .29s ease both}@keyframes pop{45%{transform:scale(1.2);filter:brightness(1.7)}100%{transform:scale(.1);opacity:0}}@keyframes land{from{transform:translateY(-28px)}to{transform:translateY(0)}}.message{margin:12px 0 0;color:#d3dfef;text-align:center;font-size:12px;letter-spacing:.04em;text-shadow:0 1px 5px #001}.restart{min-width:218px;padding:12px 29px;color:#edf7ff;font:700 20px Georgia,"STSong",serif;letter-spacing:.14em;background:linear-gradient(180deg,#294b85,#101e4b);border:1px solid #d8b761;box-shadow:0 0 0 3px rgba(20,40,82,.9),0 0 14px rgba(65,145,255,.45),inset 0 1px #7199cf;clip-path:polygon(15px 0,calc(100% - 15px) 0,100% 50%,calc(100% - 15px) 100%,15px 100%,0 50%);text-shadow:0 1px 6px #40a9ff}.modal{position:fixed;inset:0;z-index:5;display:grid;place-items:center;padding:24px;background:rgba(2,7,19,.72);backdrop-filter:blur(6px)}.modal.hidden{display:none}.modal-card{position:relative;width:min(335px,100%);text-align:center;padding:28px 24px 24px;background:#0c1935;border:1px solid #8cbfff;box-shadow:0 0 30px #2e85df;border-radius:6px}.modal-star{color:#f0c86b;font-size:42px}.modal h1{margin:5px 0;color:#edf6ff}.modal p{color:#b7c8df}.modal button{color:#fff;background:#265da3;border:1px solid #a8d7ff;padding:11px 25px;border-radius:3px}.modal-kicker{margin:0;color:#e9be68;font-size:12px;letter-spacing:.2em}.level-subtitle{font-size:12px;margin:5px 0 16px}.close-map{position:absolute;right:9px;top:9px;padding:0!important;border:0!important;background:none!important;font-size:25px!important;color:#b8cff4!important}.level-map{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}.level-node{height:54px;padding:0;background:#111e3b;border:1px solid #344f80;border-radius:50%;color:#6b7d9b;display:flex;flex-direction:column;align-items:center;justify-content:center}.level-node strong{font:700 18px Georgia,serif}.level-node small{font-size:8px}.level-node.unlocked{color:#f5deb0;border-color:#d9b96e;box-shadow:0 0 11px rgba(70,159,255,.42);background:radial-gradient(circle at 35% 25%,#315c97,#101c3c)}.level-node.current{outline:2px solid #66baff;transform:translateY(-2px)}@media(max-height:700px){.game-shell{padding-top:10px}.topbar{height:45px;margin-bottom:5px}.status-panel{min-height:67px}.avatar{width:48px;height:48px}.level{height:43px}.board{gap:3px;padding:4px}.board-frame{padding:6px}.restart{padding:9px 24px}.message{margin-top:8px}}@media(max-width:360px){.game-shell{padding-left:10px;padding-right:10px}.status-panel{grid-template-columns:55px 61px 1fr 1fr 1fr}.avatar{width:47px;height:47px}.stat b{font-size:20px}.stat span{font-size:10px}.board{gap:3px}}

/* concept-fidelity hero pass */
.topbar{height:122px;margin-bottom:0;isolation:isolate}.topbar::before{content:"";position:absolute;inset:-17px 0 auto;width:100%;height:122px;background:url("assets/redesign-concept.png") center top/100% auto no-repeat;mask-image:linear-gradient(to bottom,#000 0 73%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,#000 0 73%,transparent 100%);z-index:-1}.brand{visibility:hidden}.icon-button{top:69px;right:7px;width:49px;height:49px;border-width:2px}.status-panel{margin-top:-5px;min-height:82px;background:linear-gradient(105deg,rgba(4,13,36,.96),rgba(14,35,76,.92));box-shadow:0 0 0 1px rgba(100,176,255,.24),0 0 30px rgba(20,116,255,.32),inset 0 0 28px rgba(29,98,186,.28)}.board-frame{padding:10px;box-shadow:0 0 0 1px rgba(244,209,125,.82),0 14px 34px rgba(0,0,0,.5),0 0 34px rgba(34,124,255,.48)}.board{gap:5px;padding:7px}.tile{border-radius:7px;background:linear-gradient(145deg,#223d69,#081329)}.tile::after{inset:7%;box-shadow:0 0 0 1px rgba(229,242,255,.98),0 0 11px var(--glow),0 0 17px color-mix(in srgb,var(--glow) 45%,transparent),inset 0 0 8px rgba(255,255,255,.3)}.restart{min-width:242px;padding:13px 32px;font-size:22px;box-shadow:0 0 0 3px rgba(10,26,64,.95),0 0 18px rgba(65,145,255,.58),inset 0 1px #9ebeee}.message{font-size:13px;color:#e0e9f6}(max-height:700px){.topbar{height:82px}.topbar::before{height:88px;inset:-10px 0 auto}.icon-button{top:37px;width:42px;height:42px}.status-panel{min-height:68px}.board{gap:3px;padding:4px}.board-frame{padding:6px}}

/* reference-layout alignment */
.game-area{margin:10px 0 9px}.restart{margin-top:auto}.status-panel{grid-template-columns:70px 74px 1fr 1fr 1fr;padding:8px 10px}.avatar{width:60px;height:60px;border-width:3px;box-shadow:0 0 0 4px #0e2450,0 0 18px #349dfd}.level{height:52px}.board-frame{padding:9px}.board{gap:4px;padding:6px}.tile::after{inset:6%}.message{margin-top:9px}(max-height:700px){.game-area{margin:7px 0}.restart{margin-top:0}}
/* Reference-locked chrome: bevelled HUD, golden corner brackets and the supplied restart crest. */
.status-panel{grid-template-columns:70px 78px minmax(0,1fr);column-gap:1px;padding:9px 11px;overflow:visible}
.status-panel::before,.status-panel::after{content:"";position:absolute;z-index:3;pointer-events:none;left:50%;width:15px;height:15px;transform:translateX(-50%) rotate(45deg);background:linear-gradient(135deg,#fff1a4,#b27a28 57%,#4d2c0a);border:1px solid #f4d781;box-shadow:0 0 10px #6bbfff}.status-panel::before{top:-8px}.status-panel::after{bottom:-8px}
.stats{min-width:0;height:56px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:linear-gradient(90deg,rgba(7,22,52,.35),rgba(13,33,72,.68));clip-path:polygon(9px 0,calc(100% - 9px) 0,100% 9px,100% calc(100% - 9px),calc(100% - 9px) 100%,9px 100%,0 calc(100% - 9px),0 9px)}
.stats .stat{display:flex;min-width:0;flex-direction:column;align-items:center;justify-content:center;padding:0 2px}.stats .stat+.stat{border-left:1px solid rgba(154,199,255,.38)}.stats .stat span{font-size:11px;letter-spacing:.06em;color:#d7e8ff;white-space:nowrap}.stats .stat b{margin-top:4px;font-size:21px;line-height:1;color:#f5c964;white-space:nowrap;text-shadow:0 0 12px rgba(255,196,67,.55)}.stats .stat:nth-child(2) b{color:#78c9ff;text-shadow:0 0 12px rgba(86,180,255,.7)}
.board-frame{position:relative;padding:11px;background:linear-gradient(135deg,#f1d681 0 3%,#284e8b 9%,#0d1d3f 50%,#486fa8 91%,#e5c56e 100%);clip-path:polygon(17px 0,calc(100% - 17px) 0,100% 17px,100% calc(100% - 17px),calc(100% - 17px) 100%,17px 100%,0 calc(100% - 17px),0 17px)}
.board-frame::before,.board-frame::after{content:"✦";position:absolute;z-index:2;color:#ffe99e;font-size:18px;line-height:1;text-shadow:0 0 9px #f5b93f}.board-frame::before{top:2px;left:50%;transform:translateX(-50%)}.board-frame::after{bottom:2px;left:50%;transform:translateX(-50%)}
.board{gap:6px;padding:10px;background:radial-gradient(circle at 50% 0,#274778,#0a142b 68%)}.tile{border-radius:7px;box-shadow:inset 0 1px rgba(209,232,255,.34),inset 0 -3px 6px rgba(0,0,0,.65),0 1px 0 rgba(112,173,255,.17)}.tile::after{inset:7%;box-shadow:0 0 0 2px rgba(235,246,255,.96),0 0 11px var(--glow),0 0 20px color-mix(in srgb,var(--glow) 55%,transparent),inset 0 0 8px rgba(255,255,255,.35)}
.restart{width:min(86%,360px);height:auto;aspect-ratio:600/180;min-width:0;padding:0;border:0;background:url("assets/restart-reference-v2.png") center/100% 100% no-repeat;box-shadow:none;clip-path:none;color:transparent;text-shadow:none;letter-spacing:0;font-size:0}.restart:active{transform:scale(.97);filter:brightness(1.15)}
@media(max-height:700px){.stats{height:48px}.stats .stat b{font-size:18px}.board{gap:4px;padding:7px}.board-frame{padding:8px}.restart{width:min(76%,290px)}}

/* Fine metal fittings lifted from the accepted reference composition. */
.frame-corner{position:absolute;z-index:3;width:30px;height:30px;pointer-events:none;border-color:#e7c96f;border-style:solid;filter:drop-shadow(0 0 4px rgba(255,214,110,.55))}.frame-corner::after{content:"";position:absolute;width:5px;height:5px;border-radius:50%;background:#fff0a3;box-shadow:0 0 8px #f8c95e}.top-left{top:4px;left:4px;border-width:2px 0 0 2px}.top-left::after{top:-3px;left:-3px}.top-right{top:4px;right:4px;border-width:2px 2px 0 0}.top-right::after{top:-3px;right:-3px}.bottom-left{bottom:4px;left:4px;border-width:0 0 2px 2px}.bottom-left::after{bottom:-3px;left:-3px}.bottom-right{bottom:4px;right:4px;border-width:0 2px 2px 0}.bottom-right::after{bottom:-3px;right:-3px}
.level{position:relative}.level::after{content:"";position:absolute;right:-1px;top:11px;width:1px;height:29px;background:linear-gradient(transparent,#82c9ff,transparent)}
.stats .stat:first-child::before,.stats .stat:last-child::after{content:"";display:block;width:8px;height:1px;background:#d9b96c;box-shadow:0 0 5px #efcc79}.stats .stat:first-child::before{margin-bottom:2px}.stats .stat:last-child::after{margin-top:2px}

/* Match-three readability pass: bright playfield, high contrast tokens, less visual mud. */
body::before{background:linear-gradient(180deg,rgba(27,91,174,.05),rgba(11,34,82,.18) 57%,rgba(3,14,41,.28))}
.status-panel{background:linear-gradient(105deg,rgba(18,61,125,.94),rgba(38,91,163,.9));box-shadow:0 0 0 1px rgba(170,220,255,.6),0 0 30px rgba(63,165,255,.36),inset 0 0 24px rgba(138,205,255,.22)}
.stats{background:linear-gradient(90deg,rgba(35,92,172,.52),rgba(24,67,139,.66))}.stats .stat span{color:#ecf8ff}.stats .stat b{color:#ffe07f;text-shadow:0 0 12px rgba(255,220,105,.75)}
.board-frame{background:linear-gradient(135deg,#ffe79b 0 3%,#5da5e5 9%,#254f94 48%,#78b9ef 91%,#f7d97d 100%);box-shadow:0 0 0 1px rgba(255,236,156,.95),0 13px 28px rgba(1,22,65,.36),0 0 30px rgba(75,177,255,.52)}
.board{background:radial-gradient(circle at 50% 0,#79b8ed,#326aa9 51%,#17447f);box-shadow:inset 0 0 0 2px rgba(202,236,255,.32)}
.tile{background:linear-gradient(145deg,#d5f3ff,#83c9f2 54%,#5396cf);box-shadow:inset 0 2px 3px rgba(255,255,255,.95),inset 0 -3px 6px rgba(17,80,137,.38),0 1px 1px rgba(2,48,105,.6)}
.tile::after{box-shadow:0 0 0 2px #fff,0 0 12px var(--glow),0 0 21px color-mix(in srgb,var(--glow) 65%,transparent),inset 0 0 8px rgba(255,255,255,.52);filter:contrast(1.08) saturate(1.18)}
.message{color:#f1fbff;text-shadow:0 2px 4px #06346c;font-weight:800}

/* mobile-first board and HUD repair */
.status-panel{grid-template-columns:68px 78px minmax(0,1fr);column-gap:2px;min-height:86px;padding:9px 10px}.stats{min-width:0;height:54px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}.stats .stat{display:flex;min-width:0;flex-direction:column;justify-content:center;align-items:center;padding:0 2px}.stats .stat+ .stat{border-left:1px solid rgba(124,181,255,.32)}.stats .stat span{font-size:11px;letter-spacing:.03em;white-space:nowrap}.stats .stat b{font-size:20px;line-height:1.05;letter-spacing:0;white-space:nowrap}.board{grid-template-columns:repeat(6,1fr);gap:6px;padding:9px}.board-frame{padding:10px}.tile{border-radius:9px}.tile::after{inset:6%}.game-area{margin:8px 0 10px}.message{font-size:12px;white-space:nowrap}.restart{min-height:52px}

/* Bright, touch-first match-three skin: hierarchy is intentionally led by the board. */
:root{--ink:#26426e;--muted:#6f8db5;--line:#c7e8ff;--gold:#ffbd55}
body{background:#a8e7ff radial-gradient(circle at 13% 7%,rgba(255,255,255,.96) 0 5%,transparent 20%),radial-gradient(circle at 88% 18%,rgba(255,245,188,.86) 0 4%,transparent 17%),linear-gradient(180deg,#bcefff 0%,#82d1fb 47%,#8bd8ff 100%)}
body::before{background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(76,168,234,.12) 60%,rgba(51,131,214,.23))}
.game-shell{padding-left:13px;padding-right:13px;max-width:560px}.topbar{height:94px;margin-bottom:4px;justify-content:flex-start;padding-left:13px}.topbar::before{inset:11px 0 auto;height:74px;border-radius:25px;background:linear-gradient(135deg,rgba(255,255,255,.88),rgba(229,250,255,.54));mask-image:none;-webkit-mask-image:none;border:1px solid rgba(255,255,255,.82);box-shadow:0 10px 22px rgba(37,130,203,.17);z-index:-1}.brand{visibility:visible;position:relative;z-index:1;gap:8px;font-family:"PingFang SC","Microsoft YaHei",sans-serif;font-size:29px;letter-spacing:.04em;color:#28559a;text-shadow:0 2px 0 #fff,0 4px 10px rgba(44,132,209,.18)}.planet{width:34px;height:34px;border:0;color:#fff;font-size:18px;background:linear-gradient(145deg,#9b7cff,#5a8dff);box-shadow:inset 0 2px 2px rgba(255,255,255,.75),0 4px 0 #3b64cf,0 7px 13px rgba(74,98,208,.25)}
.icon-button{top:23px;right:13px;width:47px;height:47px;border:3px solid #fff;border-radius:16px;background:linear-gradient(145deg,#8a79ff,#587ef4);box-shadow:0 4px 0 #3e5dc4,0 8px 13px rgba(51,77,164,.25),inset 0 2px rgba(255,255,255,.52)}.icon-button:active{transform:translateY(3px);box-shadow:0 1px 0 #3e5dc4,inset 0 2px rgba(255,255,255,.52)}.icon-button i{width:4px;height:17px;background:#fff;box-shadow:none}
.status-panel{min-height:82px;grid-template-columns:63px 66px minmax(0,1fr);padding:7px 8px;border:3px solid rgba(255,255,255,.92);border-radius:23px;clip-path:none;background:linear-gradient(135deg,#effaff,#bdeaff);box-shadow:0 7px 0 #5ca5df,0 12px 20px rgba(31,111,181,.22),inset 0 -4px rgba(98,187,240,.3)}.status-panel::before,.status-panel::after{display:none}.avatar{width:54px;height:54px;border:3px solid #fff;box-shadow:0 0 0 3px #58acf1,0 4px 0 #3686ce,0 7px 11px rgba(41,119,193,.23)}.level{height:55px;border:0;background:linear-gradient(155deg,#fff6c8,#ffc66b);border-radius:16px;box-shadow:inset 0 2px rgba(255,255,255,.9),0 4px 0 #d99032;color:#80511d;text-shadow:none}.level::after{display:none}.level strong{font-family:"Arial Rounded MT Bold",Georgia,serif;color:#f17548;text-shadow:0 1px #fff}.level small{color:#9b6a26}
.stats{height:57px;background:rgba(255,255,255,.56);border-radius:16px;clip-path:none;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(104,190,241,.42)}.stats .stat+.stat{border-left:1px solid rgba(90,164,219,.34)}.stats .stat span{font-size:10px;color:#4776a4;font-weight:800}.stats .stat b{font-family:"Arial Rounded MT Bold",Georgia,serif;font-size:19px;color:#f28a48;text-shadow:0 1px #fff}.stats .stat:nth-child(2) b{color:#5089dc;text-shadow:0 1px #fff}.stats .stat:first-child::before,.stats .stat:last-child::after{display:none}
.game-area{margin:13px 0 10px}.board-frame{padding:8px;border:4px solid rgba(255,255,255,.94);border-radius:28px;clip-path:none;background:linear-gradient(145deg,#ffd665,#ffa75c 35%,#f58673 100%);box-shadow:0 8px 0 #d76763,0 14px 24px rgba(34,109,174,.26),inset 0 2px rgba(255,255,255,.68)}.board-frame::before,.board-frame::after,.frame-corner{display:none}.board{gap:6px;padding:9px;border-radius:19px;background:linear-gradient(145deg,#65c9f5,#9ae7ff);box-shadow:inset 0 2px 5px rgba(255,255,255,.9),inset 0 -4px 8px rgba(35,129,190,.26)}.tile{border:2px solid rgba(255,255,255,.94);border-radius:15px;background:linear-gradient(145deg,#f4fcff,#abdcf5);box-shadow:0 3px 0 rgba(38,112,172,.42),inset 0 2px rgba(255,255,255,.86)}.tile::after{inset:8%;box-shadow:0 0 0 2px #fff,0 2px 5px rgba(21,88,141,.25),inset 0 0 8px rgba(255,255,255,.6);filter:contrast(1.04) saturate(1.08)}.tile[data-type="0"]{background:linear-gradient(145deg,#c2edff,#68baf2)}.tile[data-type="1"]{background:linear-gradient(145deg,#ffe3f0,#f3a8c9)}.tile[data-type="2"]{background:linear-gradient(145deg,#fff4c1,#f9cd63)}.tile[data-type="3"]{background:linear-gradient(145deg,#dcd2ff,#9281e9)}.tile[data-type="4"]{background:linear-gradient(145deg,#d7f9da,#77cb94)}.tile.selected{outline:3px solid #fff;transform:translateY(-4px) scale(1.04);filter:brightness(1.08);box-shadow:0 7px 0 rgba(38,112,172,.4),0 10px 13px rgba(31,105,177,.24)}
.message{min-height:19px;margin:11px 0 0;color:#28649a;font-size:13px;font-weight:800;text-shadow:0 1px rgba(255,255,255,.88)}.restart{width:min(78%,318px);min-height:64px;aspect-ratio:auto;padding:0 24px;border:3px solid #fff;border-radius:22px;clip-path:none;background:linear-gradient(180deg,#ffba67,#f47b61);box-shadow:0 6px 0 #c85458,0 11px 16px rgba(169,72,84,.24),inset 0 3px rgba(255,246,217,.72);color:#fff;text-shadow:0 2px 0 #c95755;font:900 22px/58px "PingFang SC","Microsoft YaHei",sans-serif;letter-spacing:.1em}.restart:active{transform:translateY(5px) scale(.99);filter:none;box-shadow:0 1px 0 #c85458,inset 0 3px rgba(255,246,217,.72)}
.modal{background:rgba(37,99,159,.4)}.modal-card{border:3px solid #fff;border-radius:26px;background:linear-gradient(180deg,#f5fdff,#bdeaff);box-shadow:0 10px 0 #5ea5dd,0 18px 30px rgba(20,78,132,.28)}.modal h1{color:#2b649b}.modal p{color:#507aa3}.modal button{border:2px solid #fff;border-radius:15px;background:linear-gradient(#ffba67,#f47c61);box-shadow:0 4px 0 #c85458;color:#fff}
@media(max-width:360px){.topbar{height:82px}.brand{font-size:25px}.topbar::before{height:65px}.icon-button{top:19px;right:10px;width:42px;height:42px}.status-panel{grid-template-columns:57px 60px minmax(0,1fr);padding:7px 6px}.avatar{width:48px;height:48px}.level{height:50px}.stats .stat b{font-size:17px}.board{gap:5px;padding:7px}.tile{border-radius:12px}.restart{min-height:58px;font-size:20px;line-height:52px}}

/* Return to the approved cinematic star-fortress direction — luminous, not pastel. */
body{background:#071838 url("assets/cosmic-arena.png") center top/cover fixed no-repeat}
body::before{background:linear-gradient(180deg,rgba(4,16,45,.06),rgba(4,18,48,.28) 58%,rgba(2,8,28,.47))}
.game-shell{padding-left:16px;padding-right:16px;max-width:550px}.topbar{height:156px;margin-bottom:-4px;padding:0;justify-content:center}.topbar::before{inset:-17px 0 auto;width:100%;height:155px;border:0;border-radius:0;background:url("assets/redesign-concept.png") center top/100% auto no-repeat;mask-image:linear-gradient(to bottom,#000 0 76%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,#000 0 76%,transparent 100%);box-shadow:none}.brand{visibility:hidden}.icon-button{top:99px;right:6px;width:50px;height:50px;border:2px solid #8ed5ff;border-radius:50%;background:radial-gradient(circle at 38% 28%,#60b9ff,#173b87 55%,#08183c 100%);box-shadow:0 0 0 4px rgba(9,29,74,.72),0 0 19px rgba(80,183,255,.78),inset 0 0 11px rgba(165,228,255,.75)}.icon-button:active{transform:scale(.94);box-shadow:0 0 0 4px rgba(9,29,74,.72),0 0 11px rgba(80,183,255,.6),inset 0 0 11px rgba(165,228,255,.75)}
.status-panel{min-height:87px;grid-template-columns:68px 78px minmax(0,1fr);padding:9px 10px;border:1px solid rgba(120,192,255,.76);border-radius:0;clip-path:polygon(15px 0,calc(100% - 15px) 0,100% 15px,100% calc(100% - 15px),calc(100% - 15px) 100%,15px 100%,0 calc(100% - 15px),0 15px);background:linear-gradient(105deg,rgba(4,17,48,.97),rgba(14,49,105,.96));box-shadow:0 0 0 1px rgba(50,128,222,.32),0 11px 26px rgba(1,15,53,.52),inset 0 0 24px rgba(52,133,239,.2)}.status-panel::before,.status-panel::after{display:block}.avatar{width:58px;height:58px;border:3px solid #5fbfff;box-shadow:0 0 0 4px #0b2755,0 0 18px #309cff}.level{height:54px;border:0;border-radius:0;background:transparent;box-shadow:none;color:#eaf6ff;text-shadow:0 0 7px #2fa8ff}.level::after{display:block}.level strong{font-family:Georgia,serif;color:#f3c85f;text-shadow:0 0 12px rgba(255,195,66,.74)}.level small{color:#eaf6ff}
.stats{height:58px;border-radius:0;clip-path:polygon(9px 0,calc(100% - 9px) 0,100% 9px,100% calc(100% - 9px),calc(100% - 9px) 100%,9px 100%,0 calc(100% - 9px),0 9px);background:linear-gradient(90deg,rgba(7,25,60,.54),rgba(19,58,119,.7));box-shadow:inset 0 0 0 1px rgba(118,187,255,.26)}.stats .stat+.stat{border-left:1px solid rgba(154,205,255,.37)}.stats .stat span{font-size:11px;color:#dceeff}.stats .stat b{font-family:Georgia,serif;font-size:22px;color:#f5cc69;text-shadow:0 0 12px rgba(255,194,65,.56)}.stats .stat:nth-child(2) b{color:#7acbff;text-shadow:0 0 12px rgba(94,186,255,.72)}
.game-area{margin:14px 0 10px}.board-frame{padding:10px;border:0;border-radius:0;clip-path:polygon(18px 0,calc(100% - 18px) 0,100% 18px,100% calc(100% - 18px),calc(100% - 18px) 100%,18px 100%,0 calc(100% - 18px),0 18px);background:linear-gradient(135deg,#f0d57c 0 2%,#4c76b8 8%,#112d62 46%,#4674b0 92%,#e3c36b);box-shadow:0 0 0 1px rgba(247,214,131,.9),0 14px 32px rgba(0,6,28,.64),0 0 30px rgba(37,136,255,.38),inset 0 0 0 1px rgba(16,36,78,.82)}.board-frame::before,.board-frame::after{display:block}.frame-corner{display:block}.board{gap:6px;padding:10px;border-radius:0;background:radial-gradient(circle at 50% 0,#3e70ac,#153768 53%,#0b224d);box-shadow:inset 0 0 0 2px rgba(142,204,255,.24),inset 0 0 30px rgba(4,13,40,.48)}.tile{border:1px solid rgba(184,226,255,.35);border-radius:8px;background:linear-gradient(145deg,#244b83,#10294f);box-shadow:inset 0 1px rgba(220,242,255,.31),inset 0 -3px 6px rgba(2,10,31,.62),0 1px 0 rgba(107,185,255,.18)}.tile::after{inset:7%;box-shadow:0 0 0 2px rgba(238,248,255,.98),0 0 11px var(--glow),0 0 20px color-mix(in srgb,var(--glow) 54%,transparent),inset 0 0 8px rgba(255,255,255,.33);filter:contrast(1.06) saturate(1.13)}.tile[data-type]{background:linear-gradient(145deg,#264f89,#0f2a52)}.tile.selected{outline:2px solid #ffe07a;transform:scale(.9);filter:brightness(1.28);box-shadow:0 0 18px rgba(255,211,91,.76),inset 0 1px rgba(220,242,255,.31)}
.message{min-height:19px;margin:11px 0 0;color:#e4f3ff;font-size:13px;font-weight:700;text-shadow:0 2px 6px #001b4d}.restart{width:min(86%,360px);height:auto;min-height:0;aspect-ratio:600/180;padding:0;border:0;border-radius:0;clip-path:none;background:url("assets/restart-reference-v2.png") center/100% 100% no-repeat;box-shadow:none;color:transparent;text-shadow:none;font-size:0;line-height:1}.restart:active{transform:scale(.97);filter:brightness(1.16);box-shadow:none}
.modal{background:rgba(2,9,29,.73)}.modal-card{border:1px solid #8ccaff;border-radius:6px;background:linear-gradient(160deg,#122a59,#071a3f);box-shadow:0 0 30px rgba(49,141,239,.68)}.modal h1{color:#edf6ff}.modal p{color:#c0d9f2}.modal button{border:1px solid #a8dcff;border-radius:3px;background:linear-gradient(#3d73bd,#17366f);box-shadow:inset 0 1px #91c8ff;color:#fff}
.site-footer{width:100%;padding:12px 0 3px;text-align:center;font-size:11px;letter-spacing:.04em}.site-footer a{color:rgba(218,237,255,.78);text-decoration:none;text-shadow:0 1px 4px rgba(0,9,36,.9)}.site-footer a:hover,.site-footer a:focus-visible{color:#ffe091;text-decoration:underline}
@media(max-width:360px){.topbar{height:111px}.topbar::before{height:114px;inset:-10px 0 auto}.icon-button{top:62px;width:43px;height:43px}.status-panel{grid-template-columns:55px 63px minmax(0,1fr);padding:7px}.avatar{width:48px;height:48px}.level{height:48px}.stats .stat b{font-size:18px}.board{gap:4px;padding:7px}.tile{border-radius:6px}.restart{width:min(80%,290px)}}