/* Visual refinement based on the approved Mahjong Zen mockup. */
:root{--cream:#f7f6f1;--paper:#fbfbf7;--jade:#225f5a;--jade-2:#4e807b;--jade-3:#82a7a3;--mist:#d8e4e1;--line:#dce4e1;--warm:#eadbc4;--red:#b94b3f}
body{background:var(--cream);letter-spacing:.005em}body:not(.dark){--paper:#f7f6f1;--ink:#245c58}#app{max-width:430px;padding:22px 18px 14px;overflow:hidden}.landscape-art{inset:24% 0 0;clip-path:none;opacity:.88;background:linear-gradient(156deg,transparent 0 28%,#dae7e4 28.2% 45%,transparent 45.2%),linear-gradient(205deg,transparent 0 42%,#b9d0cd78 42.2% 61%,transparent 61.2%),linear-gradient(165deg,transparent 0 55%,#87aaa65c 55.2% 76%,transparent 76.2%)}.landscape-art:after{content:"";position:absolute;inset:10% 0 0;background:radial-gradient(ellipse at 18% 56%,#a9c2be7d 0 11%,transparent 11.5%),radial-gradient(ellipse at 68% 46%,#aec6c27d 0 16%,transparent 16.5%);filter:blur(9px)}header{grid-template-columns:48px 1fr 48px;position:relative;z-index:4;padding:2px 0 8px}header .serif{font-size:18px;font-weight:500}.back{font-size:30px;line-height:1;color:var(--jade);min-height:40px}.header-mark{font-size:18px;color:var(--jade-2);text-align:right;padding-right:7px}footer{position:relative;z-index:4;font-size:9px;letter-spacing:.22em;padding:13px 0 2px}.panel{position:relative;z-index:2;background:transparent;border:0;box-shadow:none;margin:18px auto 0;padding:10px 3px;border-radius:0}.panel h2{text-align:center;font-size:25px;margin:8px 0 2px}.panel>p:first-of-type{text-align:center;margin:0 0 20px;font-size:13px}button{border-radius:11px;border:1px solid #dbe3e0;background:#fffffff2;box-shadow:0 4px 12px #285b5420;min-height:48px}.primary{background:linear-gradient(140deg,#286963,#1f5b56);box-shadow:0 7px 18px #225f5a30}.wide{min-height:52px}.zen-screen{position:relative}.home{padding:92px 0 10px;min-height:calc(100svh - 70px);display:flex;flex-direction:column;justify-content:flex-start}.home:after{content:"";position:absolute;left:-30px;right:-30px;top:195px;height:170px;background:linear-gradient(160deg,transparent 0 35%,#d6e5e2 35.5% 59%,transparent 59.5%),linear-gradient(204deg,transparent 0 41%,#aac5c17d 41.5% 69%,transparent 69.5%);z-index:-1;filter:drop-shadow(0 10px 18px #fff)}.hero-copy{position:relative;z-index:2;margin-bottom:70px}.home h1{font-size:38px;margin:6px 0;color:#1e5551;text-shadow:0 1px 0 #fff}.home p{margin:0;color:#3e5f5b;font-size:15px}.home .stack{margin-top:auto;gap:10px}.home .stack button{position:relative;text-align:left;padding-left:58px;font-size:14px}.home .stack .primary{text-align:center;padding-left:18px}.btn-icon{position:absolute;left:20px;font-size:19px;color:var(--jade)}.primary .btn-icon{position:static;margin-right:12px;color:white}.home .secondary{display:contents}.bamboo{position:absolute;fill:#53817b;stroke:#53817b;stroke-width:2;opacity:.82;z-index:1}.bamboo-left{width:105px;left:-30px;top:18px}.sun{position:absolute;width:48px;height:48px;border-radius:50%;background:radial-gradient(circle at 38% 35%,#f8eee0,#e6d5bc);right:38px;top:60px;opacity:.78;box-shadow:0 0 35px #eadbc49c}.choices{gap:8px;margin:19px 0 24px}.choice{min-height:134px;padding:13px 5px;box-shadow:none;background:#ffffff96}.choice strong{font-size:13px}.choice small{font-size:11px;margin-top:2px}.choice.selected{border:1.5px solid var(--jade);background:linear-gradient(160deg,#edf4f0,#dce9e5);box-shadow:0 7px 14px #2b646018}.choice.selected:after{content:"✓";position:absolute;width:20px;height:20px;border-radius:50%;background:var(--jade);color:white;display:grid;place-items:center;right:6px;top:6px;font-size:11px}.choice{position:relative}.layout-preview{position:relative;display:block;width:52px;height:50px;margin:2px auto 8px}.layout-preview i{position:absolute;width:13px;height:19px;border-radius:2px;background:linear-gradient(140deg,#fffdf4,#d9d7c8);border:1px solid #c4c7b9;box-shadow:0 2px 2px #34564d35}.layout-preview i:nth-child(1){left:1px;top:25px}.layout-preview i:nth-child(2){left:14px;top:27px}.layout-preview i:nth-child(3){left:27px;top:27px}.layout-preview i:nth-child(4){left:40px;top:25px}.layout-preview i:nth-child(5){left:8px;top:14px}.layout-preview i:nth-child(6){left:21px;top:15px}.layout-preview i:nth-child(7){left:34px;top:14px}.layout-preview i:nth-child(8){left:15px;top:4px}.layout-preview i:nth-child(9){left:28px;top:4px}.preview-36{transform:scale(.8)}.preview-144{transform:scale(1.08)}.select h3{font-size:16px;margin:0 0 8px}.modes{gap:10px;margin-bottom:25px}.modes .choice{min-height:116px;padding:12px 8px}.modes .mini{font-size:27px;margin:0 0 3px;color:var(--jade-2)}.modes small{font-size:10px;line-height:1.45}.game{min-height:calc(100svh - 98px);position:relative}.game:before,.game:after{content:"";position:absolute;z-index:-1;opacity:.45;pointer-events:none}.game:before{left:-30px;bottom:125px;width:95px;height:175px;background:repeating-linear-gradient(78deg,transparent 0 14px,#5d8b8422 15px 17px,transparent 18px 25px);transform:rotate(-12deg)}.game:after{right:-30px;bottom:120px;width:90px;height:160px;background:repeating-linear-gradient(102deg,transparent 0 13px,#5d8b8420 14px 16px,transparent 17px 25px);transform:rotate(12deg)}.metrics{gap:8px;margin:4px 0 3px}.metric{position:relative;min-width:128px;padding:7px 14px 7px 40px;text-align:left;border:0;border-radius:9px;background:#ffffffdc;box-shadow:0 3px 12px #285b5415}.metric-icon{position:absolute;left:14px;top:14px;font-size:20px;color:var(--jade-2)}.metric small{font-size:9px;line-height:1}.metric strong{font-family:Georgia,serif;font-size:17px;line-height:1.15}.board-wrap{min-height:355px;padding:14px 2px 16px;overflow:visible}.board{filter:drop-shadow(0 18px 15px #1f474035)}.tile{border-radius:6px;border:1px solid #b9b8aa;background:linear-gradient(130deg,#fffef7 0,#eeeadd 72%,#d6d4c6 100%);box-shadow:inset 1px 1px 0 #fff,0 3px 0 #9ca397,2px 7px 8px #24484038;font-family:Georgia,"Songti SC",serif;font-weight:600;text-shadow:0 1px 0 #fff}.tile.face-green{color:#276a60}.tile.face-red{color:var(--red)}.tile .face-symbol{line-height:.9}.tile small{font-family:-apple-system,sans-serif;font-weight:600;color:inherit;opacity:.72}.tile.blocked{filter:brightness(.82) saturate(.72)}.tile.selected{outline:3px solid #2b7169;box-shadow:0 3px 0 #879e91,0 10px 12px #1d4c4350}.tools{gap:8px;margin-top:0}.tools button{border:0;border-radius:10px;background:#ffffffdf;box-shadow:0 4px 12px #2b646018;max-width:86px;min-height:60px;font-size:10px;padding:7px 2px}.tools span{font-size:21px;margin-bottom:2px;color:var(--jade)}.notice{font-size:10px;margin-top:8px}.stat-hero{background:#ffffffa8;border-radius:14px;padding:16px;margin-top:10px}.ring{background:conic-gradient(var(--jade) calc(var(--p)*1%),#dce8e5 0)}table{background:#ffffff80;border-radius:12px;overflow:hidden}td,th{padding:11px 8px}.setting{background:#ffffff4f;padding:13px 4px}.setting span{font-size:13px}input[type=checkbox]{appearance:none;width:39px;height:22px;border-radius:13px;background:#d4dcda;position:relative;border:0}input[type=checkbox]:before{content:"";position:absolute;width:18px;height:18px;border-radius:50%;background:#fff;top:2px;left:2px;box-shadow:0 1px 4px #0002;transition:.2s}input[type=checkbox]:checked{background:var(--jade-2)}input[type=checkbox]:checked:before{transform:translateX(17px)}.segmented{display:grid;grid-template-columns:1fr 1fr;background:#e9eeeb;border-radius:10px;padding:2px;margin:2px 0 18px}.segmented span{text-align:center;padding:8px;border-radius:8px;font-size:12px}.segmented .active{background:var(--jade);color:#fff}.guide ol{list-style:none;padding:0}.guide li{display:flex;gap:12px;align-items:flex-start;margin:18px 0}.guide li b{width:27px;height:27px;display:grid;place-items:center;border-radius:50%;background:#dbe8e5;color:var(--jade);font-family:Georgia,serif}.guide li div{flex:1}.tile-demo{color:var(--jade);background:linear-gradient(140deg,#fffef6,#e8e4d7)}.tile-demo.red{color:var(--red)}.result:before{content:"";position:absolute;left:-20px;right:-20px;top:0;height:150px;background:radial-gradient(circle at 55% 30%,#ead9bf 0 25px,transparent 26px),linear-gradient(160deg,transparent 0 42%,#cfdfdc 42.5% 64%,transparent 64.5%);z-index:-1}.result dl{background:#ffffffb3;border-radius:14px;padding:4px 10px}
@media(min-width:700px){body:not([data-screen="game"]):before{content:"";position:fixed;inset:25px;max-width:430px;margin:auto;border-radius:42px;border:7px solid #31544f;box-shadow:0 22px 50px #183d3730;pointer-events:none;z-index:10}body:not([data-screen="game"]) #app{min-height:calc(100svh - 50px);margin:25px auto;border-radius:36px}body[data-screen="game"] #app{max-width:900px}}
@media(max-width:500px){#app{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}.home{padding-top:88px}.home h1{font-size:36px}.hero-copy{margin-bottom:64px}.board-wrap{min-height:340px}.metric{min-width:118px}.panel{margin-top:12px}}
@media(orientation:landscape) and (max-height:600px){body[data-screen="game"] #app{max-width:980px;padding:8px 16px}.game{grid-template-columns:1fr 76px}.board-wrap{height:calc(100svh - 64px);min-height:0}.metrics{right:102px;top:0}.metric{min-width:120px;padding:4px 11px 4px 35px}.metric-icon{left:10px;top:8px}.tools button{min-height:55px}.game:before,.game:after{bottom:15px}.panel{background:#f7f6f1e8;border-radius:16px;padding:10px 18px}.select .choice{min-height:80px}.layout-preview{display:none}}