:root{color-scheme:light;--ink:#293a4c;--muted:#647684;--cream:#fff8ec;--purple:#7652be;--yellow:#ffdc76;font-family:'Trebuchet MS',Verdana,sans-serif;color:var(--ink);background:var(--cream)}
*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit}button{font:inherit}[hidden]{display:none!important}.app-shell{height:100dvh;min-height:0;display:flex;flex-direction:column;max-width:1440px;margin:auto;padding:0 5vw;overflow:hidden}.app-header{display:flex;justify-content:space-between;align-items:center;gap:15px;min-height:88px;border-bottom:2px solid #e9dfcf}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-size:23px;font-weight:bold;letter-spacing:-.6px}.brand-dot{color:#ef7467;margin-left:-10px}.brand-ball{width:32px;height:32px;border-radius:50%;background:radial-gradient(circle at 30% 25%,white 0 5%,#fff6 8%,transparent 28%),conic-gradient(#ffb963,#f06e6b,#9373d8,#5cbad0,#ffb963);box-shadow:inset -3px -4px 5px #29234766,0 3px 0 #d7c8b6}.home-label{font-size:14px;font-weight:bold;color:var(--purple);padding:10px 17px;border-radius:18px;background:#ede5fa}main{flex:1;min-height:0;display:flex;flex-direction:column}.welcome{display:flex;justify-content:space-between;align-items:center;gap:20px;flex:0 0 auto;min-height:230px;padding:25px 12px}.welcome-tag{color:#9a5a32;font-weight:bold;letter-spacing:2px;font-size:12px}h1{font-size:clamp(28px,3.4vw,46px);line-height:1.08;letter-spacing:-1.5px;margin:12px 0}h1 span{color:#eb7f69}.welcome p{font-size:16px;color:var(--muted);margin:12px 0 0}.hero-marbles{position:relative;width:310px;height:180px;flex-shrink:0}.glass-marble{display:block;width:64px;height:64px;aspect-ratio:1;border-radius:50%;background:radial-gradient(ellipse at 27% 22%,white 0 3%,#ffffffc9 5%,#ffffff20 21%,transparent 30%),radial-gradient(ellipse at 70% 76%,#ffffff80,transparent 28%),radial-gradient(circle at 38% 32%,transparent 25%,#00000025 64%,#162938ab 100%),repeating-conic-gradient(from 22deg at 49% 49%,var(--marble-color) 0deg 68deg,#ffffffb3 83deg,var(--marble-color) 114deg,#243b6966 150deg,var(--marble-color) 180deg);box-shadow:inset -5px -7px 8px #1b254955,inset 2px 2px 4px #ffffffb3,0 6px 0 #ddcfc250,0 11px 12px #71534218}.hero-ball{position:absolute;width:120px;height:120px;box-shadow:inset -8px -12px 16px #17234555,inset 3px 3px 6px #fff9,0 16px 15px #65513228}.hero-ball.one{left:22px;top:30px;transform:rotate(-18deg)}.hero-ball.two{left:146px;top:52px;width:104px;height:104px}.hero-ball.three{left:126px;top:-2px;width:82px;height:82px;z-index:2}.spark{position:absolute;color:#f3bc50;font-size:32px}.s1{right:8px;top:12px}.s2{left:0;bottom:0;font-size:23px}.home-content{display:grid;grid-template-columns:minmax(320px,1fr) minmax(390px,1.25fr);gap:28px;flex:1;min-height:0;padding-bottom:8px}.collection-panel,.games-panel{border:2px solid #e4d9ca;border-radius:24px;background:#fffdf8;padding:23px;min-height:0;overflow:auto}.section-title{display:flex;align-items:center;gap:12px;margin-bottom:22px}h2{font-size:23px;margin:0;letter-spacing:-.5px}.section-icon{width:36px;height:36px;background:#fbecc9;color:#be852c;display:grid;place-items:center;border-radius:12px;font-size:24px}.game-icon{background:#ece3f8;color:var(--purple)}.quantity{margin-left:auto;font-size:14px;font-weight:bold;color:#906742;background:#f5ebdb;border-radius:12px;padding:6px 10px}.marble-grid{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:26px 12px;margin:0;padding:9px 0 12px}.marble-item{display:flex;align-items:center;flex-direction:column;gap:13px}.marble-item .glass-marble{width:clamp(42px,4.7vw,68px);height:auto}.marble-name{font-size:12px;color:#647481}.game-card{display:grid;grid-template-columns:42% 1fr;min-height:225px;background:#f2f6ed;border-radius:18px;overflow:hidden;border:1px solid #dce7d4}.town-preview{overflow:hidden;background:#aaca8d;min-height:225px}.town-preview img{display:block;width:100%;height:100%;object-fit:cover}.game-body{display:flex;flex-direction:column;align-items:flex-start;padding:22px 20px;gap:12px}.game-badge{font-size:11px;font-weight:bold;text-transform:uppercase;letter-spacing:.4px;color:#52795d}h3{font-size:24px;line-height:1.1;margin:0}.game-body p{font-size:13px;line-height:1.5;color:#62776a;margin:0}.play-button{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;background:var(--purple);border-radius:13px;color:white;font-size:18px;font-weight:bold;padding:12px 32px;margin-top:auto;box-shadow:0 4px 0 #4e3388;transition:transform .15s,background .15s}.play-button:hover{background:#6742ac;transform:translateY(-2px)}a:focus-visible{outline:3px solid #e89637;outline-offset:5px}footer{flex:0 0 auto;text-align:center;color:#9d9181;font-size:12px;padding:18px 0}
@media(min-width:1000px) and (max-height:780px){.app-header{min-height:70px}.welcome{min-height:180px;padding-block:16px}.hero-marbles{transform:scale(.85)}.section-title{margin-bottom:14px}.marble-grid{gap:20px 10px}.collection-panel,.games-panel{padding:20px}.game-card,.town-preview{min-height:200px}}
@media(max-width:900px){.app-shell{padding:0 24px}.home-content{grid-template-columns:1fr 1.1fr;gap:18px}.welcome{min-height:200px}.hero-marbles{width:270px;transform:scale(.8);transform-origin:right center}.collection-panel,.games-panel{padding:18px}.marble-grid{grid-template-columns:repeat(3,1fr)}.game-card{grid-template-columns:1fr}.town-preview{height:150px;min-height:150px}.game-body{padding:18px}h2{font-size:20px}}
@media(max-width:620px),(max-height:540px){.app-shell{height:auto;min-height:100dvh;overflow:visible}.app-header{min-height:74px}.brand{font-size:18px;gap:8px}.home-label{font-size:12px;padding:8px 12px}.welcome{min-height:180px;padding:22px 0}.welcome p{font-size:14px;line-height:1.5}.hero-marbles{width:115px;height:155px;transform:none}.hero-ball.one{width:70px;height:70px;left:0;top:62px}.hero-ball.two{width:52px;height:52px;left:63px;top:79px}.hero-ball.three{width:55px;height:55px;left:42px;top:27px}.spark.s1{font-size:22px;top:0;right:9px}.spark.s2{display:none}.home-content{display:flex;flex-direction:column}.games-panel{order:-1}.game-card{grid-template-columns:40% 1fr;min-height:210px}.town-preview{height:auto;min-height:210px}.game-body{padding:16px;gap:10px}h3{font-size:21px}.play-button{font-size:17px;padding:10px 25px}.marble-grid{grid-template-columns:repeat(5,1fr);gap:22px 10px}.marble-item .glass-marble{width:44px}.marble-name{font-size:10px}.section-title{margin-bottom:16px}footer{padding-block:22px}}
@media(prefers-reduced-motion:reduce){.play-button{transition:none}}

/* Espace personnel compact : la page défile plutôt que de couper les actions. */
.app-shell{height:auto;min-height:100dvh;overflow:visible}
main{flex:1 0 auto}
.app-header{min-height:70px}
.welcome{min-height:140px;padding:18px 0}
h1{font-size:clamp(26px,3vw,36px)}
.hero-marbles{height:120px;transform:scale(.65);transform-origin:right center}
.home-content{flex:0 0 auto;align-items:start;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:22px}
.collection-panel,.games-panel{padding:20px;overflow:visible;border-radius:20px}
.section-title{margin-bottom:16px}
h2{font-size:21px}
.collection-summary{display:flex;align-items:center;justify-content:space-between;gap:14px;background:#f5eedf;border-radius:14px;padding:14px;margin-bottom:18px}
.collection-summary>div{display:flex;flex-direction:column;gap:3px}
.collection-summary .quantity{background:none;padding:0;margin:0;font-size:32px;line-height:1;color:var(--ink)}
.collection-summary span{font-size:12px;color:var(--muted)}
.shop-button{border:0;border-radius:12px;background:#ede5fa;color:#6442a2;font-weight:bold;padding:11px 14px;cursor:pointer}
button:focus-visible{outline:3px solid #e89637;outline-offset:3px}
.marble-grid{gap:14px 10px;padding:0}
.marble-item{gap:9px}
.marble-item .glass-marble{width:38px;height:38px}
.marble-name{font-size:11px;text-align:center}
.game-card{grid-template-columns:110px minmax(0,1fr);min-height:0;align-items:stretch}
.town-preview{min-height:0;height:auto}
.game-body{padding:16px;gap:10px}
h3{font-size:21px}
.game-body .play-button{font-size:16px;padding:10px 24px;margin-top:4px;align-self:flex-start}
.invitations-panel{flex:0 0 auto;max-height:none;overflow:visible}
@media(max-width:900px){.home-content{grid-template-columns:1fr}.hero-marbles{width:220px}.marble-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.game-card{grid-template-columns:100px minmax(0,1fr)}}
@media(max-width:620px){.app-shell{padding:0 16px}.hero-marbles{display:none}.welcome{min-height:120px}.games-panel{order:0}.collection-panel,.games-panel{padding:16px}.game-card{grid-template-columns:76px minmax(0,1fr)}.town-preview{min-height:0}.game-body{padding:14px}.collection-summary{flex-wrap:wrap}.marble-item .glass-marble{width:32px;height:32px}.marble-name{font-size:10px}}