:root{
  --paper:#f4ead0;
  --paper-2:#fff7df;
  --ink:#47351f;
  --wood:#6b4b2a;
  --green:#557b36;
  --green-dark:#335527;
  --purple:#6b4f73;
  --red:#a84f39;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;width:100%;height:100%;min-width:100%;min-height:100%;overflow:hidden;background:#172316;color:var(--ink);font-family:Trebuchet MS,Arial,sans-serif;overscroll-behavior:none;touch-action:none;user-select:none;-webkit-user-select:none}
html{position:fixed;inset:0;background:#162314}
body{position:fixed;inset:0;width:100%;height:100%;min-height:100dvh}
#gameRoot{
  position:fixed;left:0;top:0;
  width:var(--app-w,100vw);height:var(--app-h,100vh);
  overflow:hidden;background:#162314;touch-action:none;
  padding:0;margin:0;
}
/* IMPORTANTE: il parent di Phaser non deve avere padding. Con EXPAND il canvas riempie
   tutto il viewport disponibile e amplia soltanto l'area laterale, senza stirare il 16:9
   centrale e senza disallineare i tocchi su Safari. */
#gameRoot canvas{display:block;touch-action:none!important;-ms-touch-action:none!important;pointer-events:auto}
.seo-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

.full-overlay{position:fixed;inset:0;z-index:9000;display:none;align-items:center;justify-content:center;padding:22px;background:rgba(18,24,14,.76);backdrop-filter:blur(6px)}
.full-overlay.visible{display:flex}
.parchment{background:linear-gradient(145deg,var(--paper-2),var(--paper));border:4px solid rgba(93,67,36,.92);border-radius:22px;box-shadow:0 18px 70px rgba(0,0,0,.42),inset 0 0 28px rgba(127,90,42,.11);color:var(--ink)}

#startGate{display:flex;z-index:10000;background:linear-gradient(180deg,#f7efd8 0%,#e6d5ac 100%);color:var(--ink)}
#startGate.hidden{display:none}
.gate-card{width:min(94vw,620px);padding:26px 28px 22px;text-align:center}
.gate-logo{width:min(90%,480px);max-height:105px;object-fit:contain;margin:0 auto 10px;display:block}
.gate-card h1{font-size:clamp(25px,6vw,40px);margin:4px 0 10px;color:#3f542d}
.gate-card p{margin:8px auto;max-width:520px;font-size:clamp(15px,3.6vw,19px);line-height:1.38}
.rotate-icon{font-size:48px;line-height:1;margin:8px 0;color:#5c7a42}
.gate-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:18px}
.game-button{border:3px solid #604421;border-radius:13px;padding:13px 22px;background:var(--green);color:#fff8e6;font:800 19px/1 Trebuchet MS,Arial,sans-serif;letter-spacing:.02em;box-shadow:0 5px 0 #402f1e,0 10px 20px rgba(0,0,0,.15);cursor:pointer;min-width:180px}
.game-button:active{transform:translateY(3px);box-shadow:0 2px 0 #402f1e}
.game-button.secondary{background:#6c5775}.game-button.ghost{background:#e8d8af;color:#4f3c26}.game-button:disabled{opacity:.55;cursor:default}
.gate-note{font-size:13px!important;opacity:.72;margin-top:15px!important}

#orientationOverlay{z-index:11000;background:rgba(31,36,23,.91)}
.orientation-card{width:min(92vw,520px);padding:28px;text-align:center}
.orientation-card .phone{font-size:56px;transform:rotate(90deg);display:inline-block;margin:6px 0 18px}
.orientation-card h2{margin:0 0 10px;font-size:30px;color:#426531}
.orientation-card p{font-size:17px;line-height:1.45;margin:7px 0 16px}
.orientation-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

#leaderboardOverlay{z-index:9500}
.leader-card{width:min(92vw,760px);max-height:92vh;padding:18px 22px 20px;overflow:auto;touch-action:pan-y}
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:2px solid rgba(103,75,43,.25);padding-bottom:10px}
.modal-head h2{margin:0;text-align:center;flex:1;font-size:clamp(25px,4vw,34px);color:#3f622f}
.icon-button{width:40px;height:40px;border-radius:50%;border:2px solid #6b4d2b;background:#eadab4;color:#4d3823;font-size:22px;font-weight:bold;cursor:pointer}
.run-summary{display:flex;justify-content:center;gap:30px;padding:11px 0 6px;font-weight:bold;font-size:18px}
.run-summary strong{font-size:25px;color:#6b4f73}
.rank-table{width:100%;border-collapse:collapse;margin-top:8px;font-size:17px}
.rank-table th{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#78654d;border-bottom:2px solid rgba(97,69,39,.25);padding:7px}
.rank-table td{padding:8px;border-bottom:1px solid rgba(97,69,39,.14)}
.rank-table td:first-child,.rank-table th:first-child{width:88px;text-align:center}.rank-table td:last-child,.rank-table th:last-child{text-align:right;font-weight:800}
.rank-table tr.me{background:rgba(86,123,54,.13)}
.rank-table .empty{text-align:center!important;padding:24px;color:#7d6d57;font-weight:normal!important}
.my-rank{display:grid;grid-template-columns:90px 1fr 150px;align-items:center;background:#e5edcf;border:2px solid #728b51;border-radius:10px;margin:11px 0;padding:9px;font-weight:bold}
.my-rank span:first-child{text-align:center;color:#4e6d34;font-size:20px}.my-rank span:last-child{text-align:right;font-size:19px}
.nickname-box{margin-top:14px;padding:14px;background:rgba(102,78,47,.08);border:2px dashed rgba(102,78,47,.38);border-radius:12px}
.nickname-box h3{margin:0 0 6px;color:#5d4328}.nickname-box p{margin:4px 0 10px;font-size:14px}
.nickname-row{display:flex;gap:8px;flex-wrap:wrap}.nickname-row input{flex:1;min-width:220px;border:2px solid #7a6040;border-radius:9px;background:#fffdf6;padding:11px 13px;font:700 18px Trebuchet MS;color:#45341f;outline:none;user-select:text;-webkit-user-select:text;touch-action:auto}.nickname-row .game-button{min-width:120px;padding:11px 16px;font-size:16px;box-shadow:0 4px 0 #402f1e}
.modal-error{min-height:21px;margin:10px 0 0;text-align:center;color:#a33c31;font-weight:bold}
.modal-footer{display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:wrap;margin-top:8px}.modal-footer .game-button{font-size:15px;min-width:145px;padding:11px 17px}
.auto-return{font-size:13px;color:#6b5b48}

#shareOverlay{z-index:9600}
.share-card{width:min(92vw,590px);padding:20px 24px 24px;text-align:center}
.share-card h2{margin:0;color:#41632f;font-size:32px}.share-copy{margin:16px auto;padding:13px;background:rgba(255,255,255,.48);border:1px solid rgba(91,65,36,.2);border-radius:10px;line-height:1.45;max-width:500px}
.share-buttons{display:grid;grid-template-columns:1fr 1fr;gap:12px}.share-buttons button{border:3px solid #604421;border-radius:12px;padding:14px 12px;color:white;font:800 18px Trebuchet MS;cursor:pointer}.whatsapp{background:#4c8b4a}.facebook{background:#3e618e}.other{background:#715875;grid-column:1/-1}

#toast{position:fixed;left:50%;bottom:26px;z-index:12000;transform:translate(-50%,25px);opacity:0;pointer-events:none;background:#25261e;color:#fff7df;border:2px solid #dfc58d;border-radius:999px;padding:11px 18px;font:700 14px Trebuchet MS;transition:.2s ease;white-space:nowrap;max-width:90vw;text-overflow:ellipsis;overflow:hidden}
#toast.show{opacity:1;transform:translate(-50%,0)}

@media (orientation:portrait){#gameRoot{filter:blur(2px)}}
@media (max-height:500px){.leader-card{max-height:96vh;padding:12px 18px}.rank-table td{padding:5px}.run-summary{padding:5px 0}.nickname-box{margin-top:8px;padding:9px}.modal-head{padding-bottom:5px}.modal-footer{margin-top:4px}.share-card{padding:14px 18px}.share-copy{margin:9px auto}}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
