:root {
  --green-900:#10241e;--green-800:#17372c;--green-700:#245640;--cream:#fffdf7;
  --yellow:#ffb91e;--yellow-dark:#df8b00;--text:#17231e;--muted:#5f6d65;--danger:#b93434;
  --shadow:0 12px 28px rgba(0,0,0,.24);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Tahoma,Arial,sans-serif;color:var(--text);background:#10241e}
body{min-height:100dvh;overflow:hidden}
button{font:inherit;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
button:disabled{opacity:.45;cursor:not-allowed}

.scene{position:fixed;inset:0;z-index:0;overflow:hidden;background-image:url("./background.jpg");background-position:center;background-size:cover;background-repeat:no-repeat;transform-origin:center;animation:forest-pan 14s ease-in-out infinite alternate}
@keyframes forest-pan{0%{transform:scale(1.05) translate3d(-2.4%,0,0)}100%{transform:scale(1.09) translate3d(2.4%,-.9%,0)}}

.app{position:relative;z-index:1;width:min(100%,680px);height:100dvh;margin:0 auto;padding-bottom:8px}
.screen{padding:12px 10px 0}.hidden{display:none!important}
.panel{width:min(100%,500px);margin:5vh auto 0;padding:28px 20px;border:1px solid rgba(255,255,255,.35);border-radius:24px;background:rgba(255,255,255,.92);box-shadow:var(--shadow);text-align:center}
.logo-mark{width:74px;height:74px;margin:0 auto 12px;display:grid;place-items:center;border-radius:20px;background:linear-gradient(145deg,#ffc52d,#ed9309);color:#a95c00;font-size:52px;font-weight:900;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 8px 18px rgba(0,0,0,.18)}
h1,h2,p{margin-top:0}h1{margin-bottom:8px}.muted{color:var(--muted);line-height:1.7}
.player-slots{display:grid;gap:10px;margin:22px 0}
.player-slot{display:flex;align-items:center;gap:12px;padding:12px;border-radius:16px;text-align:right;background:#f2f6f2;border:1px solid #dce6df;transition:.2s ease}
.player-slot.joined{border-color:#77aa8d;background:#e9f6ec}.slot-number{width:38px;height:38px;flex:0 0 38px;display:grid;place-items:center;border-radius:50%;color:#fff;background:var(--green-700);font-weight:800}
.player-slot strong,.player-slot small{display:block}.player-slot small{margin-top:4px;color:var(--muted)}
.role-buttons{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.primary-button,.secondary-button,.danger-button{min-height:48px;padding:10px 18px;border-radius:14px;font-weight:800;transition:transform .15s ease,filter .15s ease}
.primary-button{color:#fff;background:linear-gradient(145deg,#2d7052,#1d4e3b);box-shadow:0 6px 14px rgba(20,72,50,.25)}
.secondary-button{color:#244c3a;background:#e6f0e9}.danger-button{color:#fff;background:var(--danger)}
.primary-button:active,.secondary-button:active,.danger-button:active{transform:scale(.97)}.full-button{width:100%;margin-top:12px}
.status-message{min-height:24px;margin:14px 0 0;font-size:13px;color:var(--muted)}

#game.screen{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px 0}
#game.screen.hidden{display:none!important}
.board{order:1;display:grid;grid-template-columns:repeat(3,1fr);gap:5px;width:min(78vw,280px);margin:0 auto}
.card{position:relative;aspect-ratio:1/1;perspective:800px;background:transparent;padding:0}
.card-inner{position:absolute;inset:0;transition:transform .38s cubic-bezier(.2,.7,.2,1);transform-style:preserve-3d}
.card.flipped .card-inner,.card.matched .card-inner{transform:rotateY(180deg)}
.card-face{position:absolute;inset:0;display:grid;place-items:center;border-radius:9px;overflow:hidden;backface-visibility:hidden;box-shadow:0 3px 7px rgba(0,0,0,.24)}
.card-face img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center center;
  border-radius:7px;
  transform:translateY(-3.5%) scale(1.025);
  transform-origin:center center;
}
.card-front{background:#e99a09;border:2px solid rgba(117,72,0,.55);color:#a85a00}
.card-front:after{content:none}
.card-back{transform:rotateY(180deg);background:#fff;border:2px solid rgba(255,255,255,.8);font-size:0}
.card.matched .card-back{box-shadow:0 0 0 2px rgba(83,170,105,.65),0 5px 10px rgba(0,0,0,.22)}
.card:not(.disabled):active .card-inner{transform:scale(.96)}
.card.flipped:not(.disabled):active .card-inner,.card.matched:not(.disabled):active .card-inner{transform:rotateY(180deg) scale(.96)}
.card.disabled{cursor:default}

.game-head{order:2;display:grid;grid-template-columns:1fr 74px 1fr;gap:8px;align-items:center;width:min(88vw,330px);margin-top:12px;direction:ltr}

.score-card{position:relative;min-height:54px;padding:8px 10px;border:1px solid rgba(255,255,255,.65);border-radius:17px;background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(241,248,243,.88));box-shadow:0 8px 20px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.9);display:flex;align-items:center;justify-content:space-between;gap:6px;direction:rtl;overflow:hidden;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.score-card:before{content:"";position:absolute;top:0;bottom:0;width:4px;background:#d8e4dc;transition:background .22s ease}
#player1Score:before{right:0}#player2Score:before{left:0}
.score-card span{position:relative;z-index:1;font-size:11px;font-weight:800;color:#40574c;white-space:nowrap}
.score-card strong{position:relative;z-index:1;min-width:30px;font-size:25px;line-height:1;color:var(--green-700);text-align:center}
.score-card.active{transform:translateY(-3px) scale(1.025);border-color:rgba(255,185,30,.75);box-shadow:0 0 0 2px rgba(255,185,30,.42),0 11px 24px rgba(0,0,0,.22),inset 0 1px 0 #fff}
.score-card.active:before{background:var(--yellow)}
.score-card.active strong{color:#b66a00}

.turn-core{position:relative;width:74px;height:74px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(20,48,38,.9);border:2px solid rgba(255,255,255,.7);box-shadow:0 8px 22px rgba(0,0,0,.27),inset 0 1px 0 rgba(255,255,255,.18);color:#fff;direction:rtl}
.turn-core:before{content:"";position:absolute;inset:5px;border-radius:50%;border:1px dashed rgba(255,255,255,.2)}
.turn-core small{position:relative;font-size:8px;color:#b9d3c4;line-height:1}
.turn-core strong{position:relative;margin-top:5px;font-size:11px;color:#fff}
.turn-dot{position:absolute;top:8px;width:7px;height:7px;border-radius:50%;background:var(--yellow);box-shadow:0 0 0 4px rgba(255,185,30,.16),0 0 12px rgba(255,185,30,.75);animation:turn-pulse 1.5s ease-in-out infinite}
@keyframes turn-pulse{50%{transform:scale(1.3);opacity:.72}}

.game-actions{order:3;display:flex;align-items:center;justify-content:space-between;gap:10px;width:min(88vw,330px);margin-top:10px;padding:7px 8px 7px 10px;border:1px solid rgba(255,255,255,.35);border-radius:16px;background:rgba(16,36,30,.64);box-shadow:0 7px 18px rgba(0,0,0,.18);backdrop-filter:blur(8px);direction:ltr}
.match-progress{display:flex;align-items:center;gap:8px;direction:rtl;color:#fff;min-width:0}
.progress-label{font-size:9px;color:rgba(255,255,255,.72);white-space:nowrap}
.match-progress strong{font-size:12px;color:#ffd05a;white-space:nowrap}
.game-actions .danger-button{min-height:34px;padding:5px 13px;border-radius:11px;font-size:11px;box-shadow:0 4px 10px rgba(0,0,0,.18);direction:rtl}
.result-panel{margin-top:8vh}.result-icon{font-size:64px;margin-bottom:8px}
.final-scores{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:20px 0}
.final-score{padding:14px;border-radius:15px;background:#f2f6f2}.final-score strong{display:block;font-size:30px;color:var(--green-700);margin-top:5px}
.toast{position:fixed;z-index:50;left:50%;bottom:22px;transform:translate(-50%,120px);width:min(calc(100% - 28px),420px);padding:12px 16px;border-radius:14px;color:#fff;background:rgba(20,30,26,.93);box-shadow:var(--shadow);text-align:center;transition:transform .25s ease}
.toast.show{transform:translate(-50%,0)}
@media(max-height:700px){#game.screen{padding:5px 0}.board{width:min(72vw,250px);gap:4px}.game-head{width:min(82vw,300px);grid-template-columns:1fr 66px 1fr;margin-top:7px}.turn-core{width:66px;height:66px}.game-actions{width:min(82vw,300px);margin-top:5px;padding:5px 7px}.progress-label{font-size:8px}}
@media(max-width:390px){.screen{padding-inline:8px}.board{width:min(76vw,260px)}.game-head{width:min(90vw,300px);grid-template-columns:1fr 62px 1fr;gap:6px}.turn-core{width:62px;height:62px}.score-card{min-height:50px;padding:7px 8px}.score-card strong{font-size:22px}.score-card span{font-size:10px}.game-actions{width:min(90vw,300px)}}