/* Mahjong Jade : table de jeu en feutre jade, plateau plein écran. Les couleurs sont en haut du fichier.
   Polices de l'appareil uniquement : aucune requête vers un site extérieur (décision du hub). */
/* Concept : une table de jeu en feutre jade. Le plateau occupe tout l'écran,
   stats en haut, actions en bas à portée de pouce, tuiles en ivoire à tranche jade. */
:root{
  --felt:#0d3b33; --felt-hi:#1b6354; --felt-lo:#07241f;
  --ivory-hi:#fbf8ee; --ivory-lo:#e4dfcb;
  --edge-a:#3a9b7b; --edge-b:#1f6b53;
  --ink:#1b2a29; --lacquer:#d2412d; --lacquer-dk:#9f2d1e;
  --gold:#f0bc4e; --text:#f0ebdc; --muted:#9dc4b7;
  --jade:#1f7a56;
  --panel:rgba(7,36,31,.94); --line:rgba(240,235,220,.16);
  --f-ui:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --f-display:'Hiragino Mincho ProN','Songti SC','Noto Serif CJK SC',Georgia,serif;
  --f-han:'Hiragino Mincho ProN','Noto Serif SC','Songti SC','STSong','Noto Serif CJK SC','Source Han Serif SC','SimSun',serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;overflow:hidden;color:var(--text);font:500 15px/1.4 var(--f-ui);-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;overscroll-behavior:none;
  background:radial-gradient(120% 85% at 50% 40%,var(--felt-hi) 0%,var(--felt) 58%,var(--felt-lo) 100%),var(--felt)}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.14;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(90% 60% at 50% 45%,rgba(240,188,78,.07),transparent 70%),radial-gradient(140% 100% at 50% 50%,transparent 55%,rgba(0,0,0,.32) 100%)}
.stat{border:1px solid rgba(240,235,220,.07);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
button{font:inherit;color:inherit;margin:0}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

#app{height:100%;display:flex;flex-direction:column;gap:8px;padding-block:8px;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}

/* ---- barre du haut ---- */
.hud{display:flex;align-items:center;gap:10px;width:100%;max-width:620px;margin-inline:auto}
.brand{flex:none;width:34px;height:44px;border-radius:7px;display:grid;place-items:center;
  font:700 24px/1 var(--f-han);color:var(--lacquer);
  background:linear-gradient(145deg,var(--ivory-hi),var(--ivory-lo));
  box-shadow:3px 3px 0 var(--edge-b),0 6px 10px rgba(0,0,0,.35)}
.stats{flex:1;min-width:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.stat{display:flex;flex-direction:column;align-items:center;padding:4px 6px;border-radius:10px;background:rgba(0,0,0,.2);min-width:0}
.stat .k{font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.stat .v{font:800 21px/1.15 var(--f-display);font-variant-numeric:tabular-nums}
.icon{flex:none;width:42px;height:42px;display:grid;place-items:center;padding:0;border-radius:12px;border:1px solid var(--line);background:rgba(0,0,0,.22);cursor:pointer}
.icon svg,.act svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.slash{display:none}
[aria-pressed="false"] .slash{display:block}

/* ---- plateau ---- */
#stage{flex:1;min-height:0;position:relative;display:grid;place-items:center;overflow:hidden}
#board{position:relative;isolation:isolate;z-index:0;flex:none;
  --tw:28px;--r:1.3;--th:calc(var(--tw)*var(--r));--dz:calc(var(--tw)*.1);--t:calc(var(--tw)*.12)}
.tile{position:absolute;display:block;padding:0;border:0;cursor:pointer;touch-action:manipulation;
  width:var(--tw);height:var(--th);
  left:calc(var(--x)*var(--tw)/2 - var(--z)*var(--dz));
  top:calc(var(--y)*var(--th)/2 - var(--z)*var(--dz));
  border-radius:calc(var(--tw)*.17);
  background:linear-gradient(165deg,rgba(255,255,255,.85) 0%,rgba(255,255,255,0) 38%),linear-gradient(150deg,var(--ivory-hi) 0%,#f2edda 55%,var(--ivory-lo) 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.75),
    calc(var(--t)*.34) calc(var(--t)*.34) 0 var(--edge-a),
    calc(var(--t)*.67) calc(var(--t)*.67) 0 var(--edge-a),
    var(--t) var(--t) 0 var(--edge-b),
    calc(var(--t)*1.3) calc(var(--t)*1.3) 0 var(--edge-b),
    calc(var(--t)*1.8) calc(var(--t)*2.2) calc(var(--t)*1.3) rgba(0,0,0,.42);
  transition:transform .12s ease}
.face{position:absolute;left:8%;top:6%;width:84%;height:88%;pointer-events:none;overflow:visible}
.face .han{font-family:var(--f-han);font-weight:700}
.tile.blocked::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(160deg,rgba(18,70,58,.26),rgba(8,40,34,.46));pointer-events:none}
#board.noassist .tile.blocked::after{display:none}
.tile.sel,.tile.hint{outline:calc(var(--tw)*.08) solid var(--gold)}
.tile.sel{filter:drop-shadow(0 0 7px rgba(240,188,78,.85));transform:translate(calc(var(--tw)*-.04),calc(var(--tw)*-.07))}
.tile.sel::before,.tile.hint::before{content:"";position:absolute;inset:0;border-radius:inherit;background:rgba(240,188,78,.4);pointer-events:none;z-index:1}
.tile.hint{animation:pulse .7s ease-in-out infinite}
.tile.gone{animation:vanish .26s ease-in forwards;pointer-events:none}
.tile.off{display:none}
.tile.pop{animation:pop .22s ease-out}
.tile.nope{animation:nope .28s}
.tile.flip{animation:flip .5s ease-in-out}
@keyframes vanish{to{opacity:0;transform:scale(.55) rotate(-8deg)}}
@keyframes pop{from{opacity:0;transform:scale(.6)}}
@keyframes nope{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
@keyframes flip{50%{transform:scale(.15,1)}}
@keyframes pulse{50%{outline-color:#fff}}

#toast{position:absolute;top:4px;left:50%;transform:translate(-50%,-8px);z-index:70;max-width:92%;padding:8px 14px;border-radius:999px;
  background:var(--panel);border:1px solid var(--line);font-weight:600;font-size:13px;text-align:center;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
#toast.show{opacity:1;transform:translate(-50%,0)}
#stuck{position:absolute;left:0;right:0;bottom:4px;margin-inline:auto;width:min(440px,100%);z-index:60;
  display:grid;gap:10px;padding:12px 14px;border-radius:16px;background:var(--panel);border:1px solid var(--line);box-shadow:0 12px 30px rgba(0,0,0,.5)}
#stuck p{margin:0;font-weight:700}
#stuck .row{display:flex;gap:8px;flex-wrap:wrap}

/* ---- barre du bas ---- */
.bar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;width:100%;max-width:620px;margin-inline:auto}
.act{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 4px 7px;border-radius:14px;
  border:1px solid var(--line);background:rgba(0,0,0,.24);cursor:pointer;font-size:12px;font-weight:700}
.act:active:not(:disabled){transform:translateY(1px)}
.act:disabled{opacity:.38;cursor:default}
.act .n{position:absolute;top:4px;right:6px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--gold);color:var(--ink);font-size:11px;line-height:17px;text-align:center}

/* ---- fenêtres ---- */
.overlay{position:fixed;inset:0;z-index:100;display:grid;place-items:center;
  padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));
  background:rgba(4,22,19,.8);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.card{width:min(520px,100%);max-height:100%;overflow:auto;padding:22px 20px;border-radius:22px;background:var(--panel);border:1px solid var(--line);box-shadow:0 24px 60px rgba(0,0,0,.55)}
.card:focus{outline:none}
.title{margin:0;font:800 clamp(30px,9vw,42px)/1.05 var(--f-display);text-wrap:balance}
.lead{margin:8px 0 18px;color:var(--muted);max-width:42ch}
.lays{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 16px;padding:0;border:0}
.lay{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0;padding:10px 6px;border-radius:14px;border:1.5px solid var(--line);background:rgba(0,0,0,.22);cursor:pointer}
.lay[aria-pressed="true"]{border-color:var(--gold);background:rgba(240,188,78,.12)}
.lay svg{width:100%;height:54px}
.lay b{font-size:14px}
.lay small{color:var(--muted);font-size:11px;text-align:center;line-height:1.25}
.btns{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 18px;border-radius:14px;border:1px solid var(--line);background:rgba(240,235,220,.08);font-weight:700;cursor:pointer}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--lacquer);border-color:var(--lacquer-dk);color:#fff6ec;box-shadow:0 3px 0 var(--lacquer-dk)}
.btn.small{min-height:38px;padding:0 14px;font-size:14px}
.sw{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;border-top:1px solid var(--line);cursor:pointer}
.sw input{appearance:none;-webkit-appearance:none;flex:none;position:relative;width:44px;height:26px;margin:0;border-radius:13px;background:rgba(240,235,220,.22);cursor:pointer;transition:background .15s}
.sw input::after{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:var(--text);transition:transform .15s}
.sw input:checked{background:var(--jade)}
.sw input:checked::after{transform:translateX(18px)}
details{border-top:1px solid var(--line);padding:11px 0 2px}
summary{cursor:pointer;font-weight:700}
details ul{margin:10px 0 0;padding-left:18px;color:var(--muted)}
details li{margin-bottom:6px}
.foot{margin:12px 0 0;font-size:12px;color:var(--muted)}
.sum{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:16px 0}
.sum div{padding:10px 12px;border-radius:12px;background:rgba(0,0,0,.24)}
.sum dt{font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.sum dd{margin:2px 0 0;font:800 22px/1.2 var(--f-display);font-variant-numeric:tabular-nums}
.record{display:inline-block;margin:10px 0 0;padding:4px 12px;border-radius:999px;background:var(--gold);color:var(--ink);font-weight:700;font-size:13px}

@media (max-height:480px) and (orientation:landscape){
  #app{gap:6px;padding-block:6px}
  .icon{width:36px;height:36px}.brand{height:36px}
  .stat .v{font-size:17px}
  .act{flex-direction:row;justify-content:center;padding:7px 4px}
  .act span.t{display:none}
}
@media (prefers-reduced-motion:reduce){
  .tile{transition:none}
  .tile.hint,.tile.gone,.tile.pop,.tile.nope,.tile.flip{animation-duration:.01s;animation-iteration-count:1}
  #toast{transition:none}
}


/* ---- éléments du hub : carte d'accès, solde, retour, mentions ---- */
.hublink{display:inline-block;color:var(--muted);text-decoration:none;font-size:13px;font-weight:600}
.hublink:hover{color:var(--text)}
.mjhead{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 0 14px}
.solde{font-weight:800;font-variant-numeric:tabular-nums;color:var(--gold);font-size:14px}
.gainline{margin:10px 0 0;font-weight:800;color:var(--gold);text-align:center;min-height:1.4em}
.legal{display:flex;flex-wrap:wrap;gap:6px 14px;margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}
.legal p{flex:1 1 100%;margin:0}
.legal a{color:var(--muted)}
.btn.link{text-decoration:none}