:root{--ink:#2d261f;--paper:#fbefda;--gold:#da9c3c;--green:#3f9160;--blue:#348ee2;--red:#d95043}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{display:flex;align-items:flex-start;justify-content:center;background:#201a18;color:var(--ink);font-family:Georgia,'Times New Roman',serif}
a{text-decoration:none;color:inherit}

.game-shell{position:relative;width:min(100vw,56.25dvh,650px);aspect-ratio:9/16;overflow:hidden;isolation:isolate;background:#e8d6b6 url('../../memory/assets/ink-background.png') center/100% 100% no-repeat;box-shadow:0 20px 70px #0009;container-type:inline-size}
.game-shell:after{content:"";position:absolute;inset:0;pointer-events:none;z-index:3;box-shadow:inset 0 0 7cqw #1d100d55}
.paper-plaque{background:linear-gradient(145deg,#fff5de,#f8e7ca 75%,#edcda0);border:1px solid #e2b97d;border-radius:12px;box-shadow:inset 0 0 0 2px #fff5ddaa,0 3px 8px #2b150f5c}

.sign-header{position:absolute;z-index:5;top:0;left:0;right:0;height:12%;pointer-events:none}
.title-sign{position:absolute;top:-5%;left:22%;width:61%;height:91%;background:url("../../memory/assets/title-sign-wood.png") center/100% 100% no-repeat;filter:drop-shadow(0 .55cqw .55cqw #1b120faa)}
.sign-seal{position:absolute;left:6.4%;top:36%;width:5.3cqw;height:5.3cqw;display:grid;place-items:center;border:2px solid #a3523c;box-shadow:inset 0 0 0 1px #f6dfc0,0 .18cqw .3cqw #140d0a88;background:#f3d6b5;color:#ad4936;font-size:3.4cqw;font-weight:bold;line-height:1;transform:rotate(-3deg)}
.sign-copy{position:absolute;left:17%;right:4%;top:24%;bottom:26%;display:flex;flex-direction:column;align-items:center;justify-content:center;white-space:nowrap;color:#fff0d5;text-shadow:0 .3cqw .45cqw #130c09}
.sign-copy strong{font-size:3.6cqw;line-height:1.06;font-weight:700}
.sign-copy small{margin-top:.5cqw;color:#e8c37d;font-size:1.9cqw;letter-spacing:.18em}

.hub-panel{position:absolute;z-index:2;top:13.5%;left:9%;width:82%;height:78%;padding:3.5% 6%;display:flex;flex-direction:column;gap:2.5%;background:radial-gradient(circle at 10% 5%,#fff9e9 0,transparent 32%),linear-gradient(130deg,#fff4dd,#f3e2c5 72%,#e8d2af);border:2px solid #d6b17e;border-radius:1.5cqw;box-shadow:0 0 0 3px #f7e7cb inset,0 0 0 4px #b59367 inset,0 12px 25px #160e0b9c}
.hub-title{text-align:center}
.hub-title span{font-size:2.6cqw;letter-spacing:.1em;color:#936039}
.hub-title h1{margin:2% 0 0;font-size:4.4cqw;line-height:1.2}
.hub-title p{margin:1% 0 0;font-size:1.9cqw;color:#775f4b}

.game-list{display:flex;flex-direction:column;gap:2.2%;flex:1;overflow-y:auto;min-height:0}
.game-card{flex:none;display:flex;align-items:center;gap:4%;padding:2.6% 5%;border-radius:1.2cqw;background:linear-gradient(#fff9e8,#f0dec0);border:1px solid #cbb28e;box-shadow:0 2px 4px #73513333,inset 0 0 0 2px #fff8e9;transition:transform .15s,box-shadow .15s}
.game-card:hover{transform:translateY(-2px);box-shadow:0 4px 10px #73513355,inset 0 0 0 2px #fff8e9}
.game-card.is-disabled{cursor:default;opacity:.6;background:linear-gradient(#efe6d2,#e2d3b4)}
.game-card.is-disabled:hover{transform:none;box-shadow:0 2px 4px #73513333,inset 0 0 0 2px #fff8e9}
.game-card.is-disabled .game-go{font-size:2.6cqw}
.game-icon{flex:none;width:9cqw;height:9cqw;display:grid;place-items:center;border-radius:50%;background:#e6d4b6;color:#815837;font-size:5cqw;font-weight:bold}
.game-copy{flex:1;min-width:0}
.game-copy strong{display:block;font-size:2.5cqw;line-height:1.15}
.game-copy small{display:block;margin-top:1%;font-size:1.6cqw;line-height:1.3;color:#786451;font-family:Arial,sans-serif}
.game-go{flex:none;font-size:3cqw;color:#a8662e}

.hub-footer{position:absolute;top:83.5%;left:0;right:0;margin:0;text-align:center;color:#fff0d1;text-shadow:0 2px 4px #000;font-size:1.8cqw;letter-spacing:.05em}