@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700;800&family=Nunito+Sans:wght@400;500;600;700;800;900&display=swap');
:root {
  --navy:#152641; --navy-deep:#0e1a30; --navy-alt:#213b60; --gold:#d4a640; --gold-bright:#eecb7c; --gold-pale:#f6e1a7;
  --parchment:#f5e6c8; --paper:#fff5df; --ink:#1b2a44; --muted:#665e53; --green:#3e7d6a; --red:#8c2e2e;
  --stroke:rgba(230,187,105,.45); --shadow:0 16px 50px rgba(4,9,19,.32);
  --serif: 'Cinzel',Georgia,'Times New Roman',serif; --sans:'Nunito Sans',system-ui,-apple-system,Segoe UI,sans-serif;
  font-family:var(--sans); color:var(--paper); background:var(--navy-deep); font-synthesis:none;
}
*{box-sizing:border-box}html{min-height:100%;background:var(--navy-deep)}body{margin:0;min-width:280px;overflow-x:hidden}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.48}a{color:inherit}p{margin:.5em 0}h1,h2,h3{margin:0}button,button:focus-visible,.clickable:focus-visible{outline-offset:3px}button:focus-visible,.clickable:focus-visible{outline:3px solid #f6c75c}img{max-width:100%}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.app-root{min-height:100vh;min-height:100dvh;position:relative;isolation:isolate;overflow-x:clip;background:radial-gradient(ellipse 62% 50% at 50% -12%,#34496b 0%,transparent 77%),linear-gradient(167deg,#1c3457 0%,#12223b 56%,#0d172b 100%)}
.app-root::before{content:"";position:absolute;inset:0;z-index:-2;opacity:.2;pointer-events:none;background-image:radial-gradient(circle at 1px 1px,#e7c780 0.8px,transparent 1.3px);background-size:24px 24px}
.app-root::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 50% 100%,transparent 55%,rgba(0,0,0,.24))}
.shell{width:min(1220px,calc(100% - 48px));margin:0 auto;padding-bottom:28px}
.topbar{display:flex;gap:16px;justify-content:space-between;align-items:center;min-height:82px;border-bottom:1px solid rgba(245,213,141,.16);position:relative;z-index:20}
.brand{display:inline-flex;align-items:center;gap:11px;background:transparent;border:0;padding:7px 0;color:#f4d78f;white-space:nowrap}
.brand-emblem{width:42px;height:42px;border:1.5px solid #e0bb64;border-radius:13px;display:grid;place-items:center;background:linear-gradient(138deg,#263e61,#0b172a);box-shadow:inset 0 1px 0 #fff3;color:#f2cf7b;font-size:23px}
.brand-title{font-family:var(--serif);font-size:20px;letter-spacing:.025em;line-height:1.02;font-weight:700;text-align:left;text-shadow:0 1px 4px #0008}
.brand-title small{display:block;text-align:left;font-family:var(--sans);font-size:9px;letter-spacing:.32em;color:#f4d996b5;font-weight:800;margin-top:5px}
.nav-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.nav-link,.icon-btn,.button{border:1px solid transparent;min-height:42px;transition:transform .15s ease, background .16s ease,box-shadow .18s ease}
.nav-link{color:#e5dcc7;background:transparent;border-radius:11px;padding:8px 13px;font-weight:800;font-size:13px;letter-spacing:.01em}.nav-link:hover,.nav-link.current{background:#ffffff12;color:var(--gold-bright)}
.icon-btn{border:1px solid #e7ca8249;border-radius:12px;width:42px;height:42px;display:inline-grid;place-items:center;line-height:1;background:#ffffff10;color:#f1d79a;font-size:18px}
.icon-btn:hover{background:#ffffff24}.lang-btn{font-size:12px;font-weight:900;letter-spacing:.03em}
.button{border-radius:13px;display:inline-flex;justify-content:center;align-items:center;gap:9px;min-height:49px;padding:10px 22px;font-size:15px;font-weight:900;text-align:center;line-height:1.25;box-shadow:0 4px 0 #0004}
.button:hover:not(:disabled){transform:translateY(-1px)}.button:active:not(:disabled){transform:translateY(2px);box-shadow:0 2px 0 #0005}
.button.gold{color:#192842;background:linear-gradient(180deg,#f5d98d 0%,#dfb54e 54%,#c8932c 100%);border-color:#f9e4a3;box-shadow:0 4px 0 #805b1f,0 10px 22px #0b142a66}
.button.paper{background:linear-gradient(180deg,#fff6df,#ebd2a8);color:#263247;border-color:#f7e5bb;box-shadow:0 4px 0 #8a7041}
.button.ghost{background:#ffffff11;color:#f4ebd3;border-color:#f5dca04a;box-shadow:none}
.button.success{color:#fff;background:linear-gradient(180deg,#4b9b6d,#1e6849);border-color:#acdfad;box-shadow:0 4px 0 #134834}
.button.slim{min-height:40px;padding:8px 13px;font-size:13px}
.button.full{width:100%}.mini-label{letter-spacing:.19em;text-transform:uppercase;font-size:11px;font-weight:900;color:#e9bc67}.subtle{color:#c5cee0}.eyebrow{color:#d8bb78;font-size:11px;text-transform:uppercase;letter-spacing:.21em;font-weight:900}
.page{animation:fadein .3s ease both}.page-heading{padding:30px 0 22px;display:flex;justify-content:space-between;align-items:flex-end;gap:14px}.page-heading h1{font:700 clamp(23px,3vw,37px)/1.2 var(--serif);color:#f7e0a3;margin:7px 0}.page-heading p{color:#c8d0df;max-width:580px}
/* HOME */
.hero-wrap{display:grid;grid-template-columns:1.07fr .93fr;gap:26px;align-items:stretch;padding-top:29px}
.hero-art{position:relative;overflow:hidden;min-height:440px;border-radius:24px;border:1px solid rgba(242,200,111,.45);box-shadow:var(--shadow);background:linear-gradient(180deg,transparent 45%,#122541 99%),url('assets/history-banner.webp') center top / cover no-repeat,#172743}
.hero-art::before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#0d1c33 2%,#11264240 52%,transparent 80%)}
.hero-art-content{position:absolute;inset:auto 25px 26px;max-width:440px}.hero-art h1{font:800 clamp(32px,4vw,54px)/1.05 var(--serif);text-shadow:0 5px 15px #000b;color:#f9dd9b}
.hero-art h1 span{display:block;color:#fbe5b6}.hero-art .hero-sub{max-width:370px;color:#f4ead2;margin-top:13px;font-size:15px;line-height:1.55;text-shadow:0 1px 4px #0009}
.hero-art .seal{position:absolute;top:20px;left:22px;border:1px solid #ffe9b566;background:#162d4ecc;border-radius:50px;padding:7px 13px;font-size:11px;font-weight:900;letter-spacing:.12em;color:#f8dfab}
.hero-side{display:flex;flex-direction:column;gap:17px}
.welcome-top{background:linear-gradient(140deg,#fdf1d8,#dec69c);border:1px solid #ffe4a9;border-radius:20px;padding:27px;color:var(--ink);position:relative;overflow:hidden;box-shadow:var(--shadow)}
.welcome-top::after{content:'✦';position:absolute;font-size:180px;right:-16px;top:-49px;color:#b28a3819;pointer-events:none}
.welcome-top h2{font:700 clamp(24px,2.8vw,35px)/1.23 var(--serif);margin:8px 0 13px}.welcome-top p{color:#5c5660;line-height:1.55;max-width:420px;font-size:15px}
.hero-buttons{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:19px}.hero-buttons .gold{grid-column:1/-1;min-height:61px;font-size:19px}
.progress-panel{border:1px solid #e8c8794d;border-radius:17px;padding:19px 20px;background:linear-gradient(125deg,#1e375a,#132643);box-shadow:0 12px 30px #070d1e33}
.progress-head{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:8px}.progress-head strong{font-family:var(--serif);font-size:15px;color:#f3d999}
.progress-value{color:#f4d17a;font-weight:900}.progress-bar{height:9px;border-radius:99px;border:1px solid #f8d7845c;background:#ffffff19;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,#c69634,#ffe4a0);border-radius:99px;transition:width .3s}
.progress-meta{font-size:12px;color:#bac4d4;margin-top:9px}.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.stat{background:#ffffff0c;border:1px solid #ffffff1a;border-radius:14px;padding:12px;text-align:center}.stat b{font-size:22px;display:block;color:#f9d986}.stat span{color:#c5cdd8;font-size:11px}
.section-line{display:flex;justify-content:space-between;align-items:center;margin:36px 0 15px;gap:10px}.section-line h2{font:700 20px var(--serif);color:#f4da9f}.section-line p{font-size:12px;color:#aebcce}
.family-preview-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}
.family-preview{border:1px solid #e9c7854d;border-radius:17px;display:flex;gap:12px;align-items:center;padding:15px;background:#1b3051a8;min-width:0}
.family-preview-icon{font-size:30px;background:linear-gradient(145deg,#f9e5b9,#b88d46);color:#493218;border:1px solid #f4cc71;border-radius:12px;min-width:54px;height:60px;display:grid;place-items:center;font-weight:900}
.family-preview h3{font-size:14px;color:#f7e2ac;line-height:1.25}.family-preview p{font-size:12px;color:#c5cada;margin:4px 0 0}.six-dots{display:flex;gap:4px;margin-top:10px;max-width:180px}.six-dots i{display:block;flex:1;height:7px;border:1px solid #ffe2ab51;border-radius:2px;background:#ffffff1c}.six-dots i.done{background:#e5b151;box-shadow:inset 0 1px 0 #fff6}
/* LEVELS */
.level-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px}
.level-tile{border:1px solid #f6d88750;border-radius:18px;padding:20px 20px 17px;background:linear-gradient(148deg,#263d60,#15243e);color:#eee4cf;text-align:left;min-height:212px;position:relative;overflow:hidden;box-shadow:0 12px 28px #060d1f44;display:flex;flex-direction:column;gap:9px;transition:transform .18s}
.level-tile:hover{transform:translateY(-3px);border-color:#f3cb80}.level-tile::after{content:'◈';position:absolute;right:-6px;top:-32px;font-size:150px;color:#f6de9210;pointer-events:none}
.level-tile .level-id{font-family:var(--serif);font-weight:800;color:#fbd987;font-size:28px}.level-tile .level-name{font-family:var(--serif);font-size:17px;font-weight:700;position:relative;z-index:1}.level-tile .level-desc{font-size:13px;color:#cbd4e2}.level-tile .level-bottom{display:flex;justify-content:space-between;gap:8px;margin-top:auto;color:#e0ca97;font-size:12px;font-weight:800}.level-tile.complete{border-color:#64bda476}.level-completed{position:absolute;top:16px;right:18px;background:#397d69;border-radius:25px;padding:4px 10px;font-size:11px;color:white}
/* GAME */
.game-top{display:flex;gap:14px;justify-content:space-between;align-items:center;padding:18px 0 16px}.game-back{display:flex;gap:11px;align-items:center;min-width:0}.game-top h1{font:700 clamp(16px,2.3vw,23px)/1.25 var(--serif);color:#f8dfab;margin:4px 0}.game-top p{font-size:12px;color:#c8cdd7;margin:0}.game-counters{display:flex;align-items:center;gap:9px;flex-shrink:0}
.move-counter{border:1px solid #d8b977;background:linear-gradient(180deg,#f6e8cb,#ddb96e);border-radius:12px;color:#2d3440;padding:7px 12px;display:flex;gap:8px;align-items:center;min-width:109px;box-shadow:0 3px 0 #917239}
.move-counter b{font:900 22px var(--sans)}.move-counter span{font-size:9px;line-height:1.15;text-transform:uppercase;letter-spacing:.08em;font-weight:900}
.move-counter.danger{background:linear-gradient(180deg,#f4bfb2,#cc7567)}
.game-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(310px,390px);gap:17px;align-items:stretch}
.game-board,.game-rack{border:1px solid #d8b36c88;border-radius:21px;box-shadow:0 14px 36px #040c1e60;overflow:hidden;background:linear-gradient(160deg,#234067,#172945 54%,#14243d);position:relative}
.game-board{padding:23px;display:flex;flex-direction:column;gap:15px;min-height:533px}
.game-board::before{content:"";position:absolute;inset:0;opacity:.055;pointer-events:none;background:repeating-radial-gradient(circle at 50% 100%, transparent 0px,transparent 22px,#ead29f 23px,transparent 24px);}
.panel-eyebrow{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:12px;color:#e8c67f;font-weight:800;letter-spacing:.06em;position:relative;z-index:1}
.panel-eyebrow .tip{color:#d1d5e0;font-weight:500;letter-spacing:0}
.destinations{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;position:relative;z-index:1}
.destinations.three{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.family-zone{position:relative;padding:15px 13px 14px;border-radius:15px;border:2px solid #eecb784f;background:linear-gradient(163deg,#faf0d7,#e9d1a4);color:var(--ink);min-width:0;min-height:185px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:7px;box-shadow:0 6px 0 #070f2224,0 14px 28px #040a1b4d;transition:transform .16s,border-color .16s,filter .16s;user-select:none}
.family-zone::before{content:"";height:7px;inset:0 0 auto;position:absolute;border-radius:13px 13px 0 0;background:linear-gradient(90deg,#8a592b,#e6bb68,#8a592b)}
.family-zone.terracotta::before{background:linear-gradient(90deg,#7d2928,#c65f45,#7d2928)}.family-zone.azure::before{background:linear-gradient(90deg,#294c85,#7399cf,#294c85)}
.family-zone .zone-icon{font:800 29px Georgia,serif;background:#f3dbab;border:1px solid #bd9a63;border-radius:50%;width:54px;height:54px;display:grid;place-items:center;color:#664f2e;line-height:1}
.family-zone .zone-title{font:800 clamp(13px,1.7vw,17px)/1.18 var(--serif);min-height:21px;display:grid;place-items:center;overflow-wrap:anywhere}
.family-zone .zone-count{font-size:12px;font-weight:900;color:#73532c}.family-zone .six-dots{width:100%;margin:0 auto}.family-zone .six-dots i{height:10px;border-color:#b58e5a70;background:#fff3dc}.family-zone .six-dots i.done{background:#c89539}
.family-zone.can-drop{cursor:pointer}.family-zone.can-drop:hover,.family-zone.targeted{border-color:#fff6c4;transform:translateY(-3px);filter:brightness(1.07);box-shadow:0 0 0 4px #eed48e40,0 12px 30px #040a1b55}
.family-zone.bad{animation:shake .35s ease;border-color:#b2463d}.family-zone.complete{border-color:#79cba5}.family-zone .zone-done{font-size:12px;color:#28735b;font-weight:900}
.board-progress{align-self:center;width:min(365px,82%);margin:auto 0;position:relative;z-index:1;text-align:center;color:#ecd69d;padding:14px 20px;border:1px solid #ebc57b3b;border-radius:16px;background:#0e203763}.board-progress strong{font:800 37px var(--serif);display:block;margin:7px 0 13px}.board-progress strong small{font-size:17px;color:#d3b981}.board-progress .progress-bar{height:8px}.game-tips{position:relative;z-index:1;display:flex;gap:12px;align-items:flex-start;margin-top:auto;border-top:1px solid #ffe0a820;padding-top:17px}
.tips-icon{border-radius:12px;background:#d5ad63;color:#3c3427;display:grid;place-items:center;min-width:44px;height:44px;font-size:21px}.game-tips h3{font-size:14px;color:#efdbac}.game-tips p{font-size:13px;line-height:1.5;color:#cbd3e2}
.game-rack{display:flex;flex-direction:column;padding:18px;min-height:533px;gap:13px}
.rack-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}.rack-head h2{font:700 18px var(--serif);color:#f0d596}.rack-head p{color:#c8cede;font-size:12px;margin-top:3px}
.deck-badge{border:1px solid #ecc98770;padding:6px 9px;border-radius:10px;background:#152642b7;white-space:nowrap;color:#f3d18a;font-size:12px;font-weight:900}
.hand{display:flex;align-items:stretch;justify-content:center;gap:10px;min-height:220px;flex:1;min-width:0}
.playing-card{position:relative;display:flex;flex-direction:column;gap:0;flex:1;min-width:0;max-width:172px;min-height:232px;overflow:hidden;border:2px solid #dbb66d;border-radius:12px;padding:5px;background:linear-gradient(140deg,#f9ead0,#b88a42);box-shadow:0 7px 0 #070d1b77,0 12px 22px #050c1d50;color:#1d2b45;touch-action:none;user-select:none;-webkit-user-select:none;transition:border-color .15s,transform .15s,box-shadow .15s;cursor:grab;outline:none}
.playing-card:active{cursor:grabbing}.playing-card:focus-visible{outline:3px solid #fff7cc;outline-offset:3px}
.playing-card.selected{transform:translateY(-7px);border-color:#fff8d7;box-shadow:0 0 0 3px #f6d88788,0 12px 23px #0008}.playing-card.dragging{opacity:.45}
.card-picture{position:relative;width:100%;flex:1;min-height:116px;border:1px solid #ddc48c;border-radius:7px 7px 3px 3px;overflow:hidden;background:linear-gradient(145deg,#dcbb80,#9d6131)}
.card-picture img{display:none;position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#d3b98f;z-index:2}
.card-picture img.ready{display:block}.card-picture .fallback{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;text-align:center;background:radial-gradient(circle at 70% 15%,#fce2a68a,transparent 52%),linear-gradient(160deg,#c3a270,#866342);padding:7px;color:#fef1d5}
.card-picture.family-rome .fallback{background:radial-gradient(circle at 70% 10%,#edb58d66,transparent 50%),linear-gradient(165deg,#b56d50,#6d342f)}
.card-picture.family-greece .fallback{background:radial-gradient(circle at 70% 10%,#bddaf6aa,transparent 53%),linear-gradient(150deg,#80a5cb,#355a83)}
.fallback-symbol{font-size:clamp(28px,4vw,48px);filter:drop-shadow(0 3px 3px #0004);line-height:1.4}
.fallback .fallback-small{font-size:9px;line-height:1.28;font-weight:800;max-width:90%;color:#fff3e1}
.card-band{padding:8px 4px 6px;flex:0 0 auto;min-height:76px;background:linear-gradient(180deg,#ffefcc,#f1d8aa);border-radius:0 0 5px 5px;text-align:center;display:flex;flex-direction:column;justify-content:center;gap:2px}
.card-band .card-name{font:800 clamp(10px,1.2vw,12px)/1.2 var(--sans);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden;overflow-wrap:anywhere}
.card-band .card-date{font-size:10px;color:#8c663a;font-weight:900}
.empty-slot{min-width:0;flex:1;max-width:172px;min-height:232px;border:2px dashed #b5c0d055;border-radius:12px;display:grid;place-items:center;color:#a8b8cd;font-size:30px;background:#ffffff0a}
.rack-actions{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:8px;margin-top:auto}.rack-actions .button{font-size:13px;min-height:47px;padding:9px 12px}.rack-actions .icon-btn{height:47px;width:47px}
.action-secondary{font-size:12px;color:#cbd1dc;min-height:22px;text-align:center}.selection-note{font-size:12px;color:#f6dc93;min-height:36px;text-align:center;line-height:1.35}
.drag-ghost{position:fixed!important;z-index:1000;pointer-events:none!important;opacity:.94!important;transform:rotate(-3deg) scale(.94);margin:0!important;box-shadow:0 15px 40px #0008!important;max-height:270px;min-height:185px}
.toast{position:fixed;z-index:1500;left:50%;bottom:max(20px,env(safe-area-inset-bottom));transform:translateX(-50%);padding:13px 21px;max-width:min(92vw,540px);background:#fff1ce;color:#1b2c47;border:1px solid #dab15c;border-radius:14px;box-shadow:0 9px 30px #0007;font-weight:900;font-size:14px;text-align:center;animation:toastin .22s ease;pointer-events:none}.toast.negative{background:#f7ddda;border-color:#d7847a}
/* ALBUM */
.album-info{display:flex;justify-content:space-between;gap:12px;align-items:center;background:linear-gradient(140deg,#e9d5ac,#fcf1d8);border:1px solid #e6c888;border-radius:16px;padding:17px 22px;color:var(--ink);margin-bottom:17px}
.album-info h2{font:700 20px var(--serif)}.album-info p{color:#60594f;font-size:13px}.album-overall{font:900 24px var(--sans);color:#916726}
.album-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}.album-card{border-radius:18px;border:1px solid #eec87b62;background:linear-gradient(150deg,#263c5d,#11233e);overflow:hidden;color:#e8e5df;box-shadow:var(--shadow)}
.album-cover{height:116px;display:flex;align-items:center;justify-content:center;gap:15px;position:relative;background:radial-gradient(circle at 50% 25%,#e0b45c50,transparent 53%),linear-gradient(120deg,#324866,#122641);border-bottom:1px solid #efce7b70}.album-cover span{font:700 48px var(--serif);color:#e2bd75;text-shadow:0 5px 14px #0008}
.album-cover small{font:700 11px var(--serif);letter-spacing:.11em;text-transform:uppercase;color:#ffe7b0}
.album-card-body{padding:18px}.album-card-body h3{font:700 17px var(--serif);color:#ffe2a1}.album-card-body p{color:#cbd0d9;font-size:12px;min-height:35px}
.album-card-body .six-dots{max-width:none;margin:15px 0}.album-card-body .button{width:100%}
.album-detail-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:18px}.collectible{background:linear-gradient(145deg,#f9efda,#e5c995);color:var(--ink);border:1px solid #f5d48c;border-radius:14px;padding:9px;min-height:226px;box-shadow:0 7px 0 #070d1b55;display:flex;flex-direction:column;text-align:center;overflow:hidden}
.collectible .card-picture{height:155px;min-height:155px;flex:initial}.collectible strong{font:800 13px/1.25 var(--sans);margin:10px 3px 4px;overflow-wrap:anywhere}.collectible .card-date{font-size:12px;color:#8b6130;margin-top:auto}
.collectible.locked{border-color:#4c5367;background:#1c2a43;color:#c3c9d2}.collectible.locked .card-picture{background:#263953;border-color:#546176;display:grid;place-items:center;font-size:28px;color:#b4bdcc}.collectible.locked strong{color:#c7cdd9}.collectible.locked .card-date{color:#8a98a9}
.collectible.clickable{cursor:pointer;transition:transform .15s}.collectible.clickable:hover{transform:translateY(-3px)}
/* MODALS */
.overlay{position:fixed;inset:0;background:#050d1ac4;display:flex;align-items:center;justify-content:center;padding:20px;z-index:900;backdrop-filter:blur(6px)}
.modal{width:min(510px,100%);border:2px solid #e9bf72;border-radius:21px;background:linear-gradient(152deg,#fdf3df,#e4c993);color:var(--ink);padding:26px;box-shadow:0 28px 80px #000a;text-align:center;max-height:min(95dvh,740px);overflow:auto;animation:modalin .25s ease both}
.modal .modal-crest{height:69px;width:69px;display:grid;place-items:center;margin:0 auto 10px;border-radius:50%;border:2px solid #eed196;background:linear-gradient(160deg,#243b5b,#0c182b);color:#f6d88a;font-size:32px}
.modal h2{font:800 clamp(21px,3vw,30px)/1.2 var(--serif);margin:8px 0 11px}.modal p{line-height:1.55;font-size:14px;color:#605746}.modal .button{margin-top:9px}.modal-buttons{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:15px}.modal-buttons .button{flex:1 1 150px}
.modal .reward-row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:15px auto}.reward-chip{background:#fff8e9;border:1px solid #d2ae68;border-radius:9px;padding:8px 11px;color:#6b4a24;font-size:11px;font-weight:900}
.modal .sub-result{background:#fff8e78c;border:1px solid #ddc18b;border-radius:13px;padding:13px;margin:13px 0;color:#3e4e54;font-size:13px}.modal .sub-result strong{color:#1f3f4f}
.modal .card-large-preview{width:min(185px,42vw);height:255px;margin:7px auto 12px}.modal .card-large-preview .card-picture{height:100%}
.info-list{padding-left:23px;text-align:left;color:#574e42;font-size:14px;line-height:1.6}.info-list li{margin-bottom:9px}
.footer-info{margin:18px 0 0;text-align:center;font-size:11px;color:#aab5c5}.footer-info a{color:#ecd097;text-decoration:none}
/* Animations */
@keyframes fadein{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@keyframes toastin{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes modalin{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes shake{25%{transform:translateX(-5px)}50%{transform:translateX(5px)}75%{transform:translateX(-3px)}}
/* MOBILE portrait */
@media(max-width:950px){.shell{width:min(100% - 28px,760px)}.hero-wrap{grid-template-columns:1fr;gap:15px}.hero-art{min-height:270px;background-position:center 18%}.hero-art-content{inset:auto 22px 20px}.hero-art h1{font-size:39px}.welcome-top{padding:20px}.family-preview-grid{gap:8px}.family-preview{flex-direction:column;text-align:center;padding:12px 8px}.family-preview-icon{width:48px;height:48px}.level-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.game-layout{grid-template-columns:1fr}.game-board{min-height:auto}.game-rack{min-height:auto}.hand{min-height:206px}.playing-card,.empty-slot{min-height:200px;max-width:170px}.game-tips{margin-top:6px}.album-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.album-detail-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:600px){.shell{width:calc(100% - 22px);padding-bottom:calc(16px + env(safe-area-inset-bottom))}.topbar{min-height:62px;gap:6px}.brand{gap:7px}.brand-emblem{width:32px;height:34px;font-size:18px;border-radius:9px}.brand-title{font-size:15px}.brand-title small{font-size:7px;letter-spacing:.2em}.nav-actions{gap:5px}.nav-link{font-size:0;padding:7px;width:35px;min-height:37px;border-radius:10px}.nav-link[data-action="home"]{display:none}.nav-link .nav-icon{font-size:18px;display:inline-block}.icon-btn{width:35px;height:37px;border-radius:10px}.lang-btn{font-size:11px}.hero-wrap{padding-top:13px}.hero-art{min-height:250px;border-radius:17px;background-size:auto 100%;background-position:center top}.hero-art .seal{top:9px;left:10px;font-size:9px}.hero-art-content{inset:auto 15px 13px}.hero-art h1{font-size:30px}.hero-art .hero-sub{font-size:12px;margin-top:7px}.welcome-top{padding:17px;border-radius:16px}.welcome-top h2{font-size:23px}.welcome-top p{font-size:13px}.hero-buttons{gap:8px;margin-top:14px}.hero-buttons .gold{min-height:54px;font-size:17px}.button{padding:9px 12px;min-height:44px;font-size:13px}.progress-panel{padding:14px}.stat-row{gap:6px}.stat{padding:8px 3px}.stat b{font-size:18px}.stat span{font-size:10px}.section-line{margin:22px 0 11px}.section-line h2{font-size:16px}.family-preview-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.family-preview{gap:5px;padding:10px 5px;border-radius:12px}.family-preview-icon{width:43px;height:45px;font-size:23px}.family-preview h3{font-size:11px}.family-preview p{font-size:9px;margin:2px}.six-dots{gap:3px}.family-preview .six-dots{margin-top:5px}.page-heading{padding:18px 0 13px}.page-heading h1{font-size:22px}.page-heading p{font-size:12px}.level-grid{gap:10px}.level-tile{min-height:180px;padding:12px 11px}.level-tile .level-id{font-size:25px}.level-tile .level-name{font-size:13px}.level-tile .level-desc{font-size:11px}.level-tile .level-bottom{font-size:10px}.level-completed{top:9px;right:8px;padding:3px 6px;font-size:9px}.game-top{padding:11px 0;gap:6px}.game-back{gap:8px}.game-back .icon-btn{width:34px;height:34px}.game-top h1{font-size:15px}.game-top p{font-size:10px}.game-counters{gap:6px}.move-counter{padding:5px 8px;min-width:76px;gap:6px;border-radius:9px}.move-counter b{font-size:17px}.move-counter span{font-size:7px}.game-layout{gap:10px}.game-board{padding:13px;gap:10px;border-radius:15px}.panel-eyebrow{font-size:10px}.panel-eyebrow .tip{font-size:10px;max-width:50%;text-align:right}.destinations{gap:8px}.destinations.three{gap:5px}.family-zone{min-height:128px;padding:12px 7px 9px;gap:5px;border-radius:11px}.family-zone .zone-icon{width:38px;height:38px;font-size:22px}.family-zone .zone-title{font-size:11px;min-height:27px;line-height:1.1}.family-zone .zone-count{font-size:10px}.family-zone .six-dots i{height:7px}.family-zone .zone-done{font-size:9px}.destinations.three .family-zone{padding:11px 3px 9px;min-height:126px}.destinations.three .zone-icon{width:32px;height:32px;font-size:17px}.destinations.three .zone-title{font-size:10px}.board-progress{display:none}.game-tips{padding-top:9px;gap:9px}.tips-icon{min-width:32px;height:32px;font-size:16px}.game-tips h3{font-size:11px}.game-tips p{font-size:10px;margin:3px 0}.game-rack{padding:12px 12px 10px;border-radius:15px;gap:8px}.rack-head h2{font-size:14px}.rack-head p{font-size:10px}.deck-badge{font-size:10px;padding:5px 8px}.hand{min-height:171px;gap:7px}.playing-card,.empty-slot{max-width:155px;min-height:166px;border-radius:10px;padding:4px}.card-picture{min-height:89px}.fallback-symbol{font-size:30px}.fallback .fallback-small{font-size:8px}.card-band{padding:5px 3px 3px;min-height:65px}.card-band .card-name{font-size:10px}.card-band .card-date{font-size:9px}.rack-actions{gap:6px}.rack-actions .button{font-size:11px;padding:8px;min-height:41px}.rack-actions .icon-btn{width:41px;height:41px}.selection-note{min-height:23px;font-size:10px}.album-info{padding:12px;gap:8px}.album-info h2{font-size:16px}.album-info p{font-size:11px}.album-overall{font-size:21px}.album-grid{grid-template-columns:1fr;gap:10px}.album-cover{height:85px}.album-card-body{padding:13px}.album-card-body p{min-height:0}.album-detail-grid{gap:7px}.collectible{min-height:177px;padding:5px;border-radius:10px}.collectible .card-picture{height:100px;min-height:100px}.collectible strong{font-size:10px}.collectible .card-date{font-size:9px}.overlay{padding:12px}.modal{padding:20px;border-radius:16px}.modal p{font-size:13px}.footer-info{font-size:10px}}
@media(max-width:355px){.nav-link{width:30px}.icon-btn{width:32px;height:34px}.brand-title{font-size:13px}.brand-emblem{display:none}.hero-art{min-height:220px}.hero-art h1{font-size:27px}.destinations.three .zone-title{font-size:9px}.family-zone .zone-title{font-size:10px}.card-band .card-name{font-size:9px}.playing-card,.empty-slot{min-height:153px}.card-picture{min-height:80px}.card-band{min-height:59px}}
/* short landscape phones : make game board and rack sit side by side and scroll page vertically if necessary */
@media(max-height:500px) and (orientation:landscape) and (max-width:950px){.topbar{min-height:49px}.hero-wrap{grid-template-columns:.8fr 1.2fr}.hero-art{min-height:245px}.hero-art h1{font-size:27px}.hero-art .hero-sub{font-size:11px}.welcome-top{padding:13px}.welcome-top h2{font-size:18px}.welcome-top p{font-size:11px}.game-layout{grid-template-columns:minmax(0,1.05fr) minmax(280px,.95fr);gap:9px}.game-board{padding:10px;gap:8px}.game-rack{padding:9px}.destinations{gap:6px}.family-zone{min-height:114px;padding:9px 5px 7px;gap:4px}.family-zone .zone-icon{width:29px;height:29px;font-size:17px}.family-zone .zone-title{font-size:10px;min-height:18px}.family-zone .zone-count{font-size:9px}.game-tips{margin:0;padding-top:7px}.game-tips p{font-size:9px}.hand{min-height:160px}.playing-card,.empty-slot{min-height:160px}.card-band{min-height:58px}.game-top{padding:7px 0}.footer-info{margin-top:9px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}