*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;background:#2b2620;color:#fbf6ec;-webkit-tap-highlight-color:transparent;user-select:none}
.screen{display:none;position:fixed;inset:0;flex-direction:column;align-items:center;justify-content:center}
.screen.on{display:flex}
#s-title{background:#1e1a15}
.title-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#s-title .menu{position:relative;margin-top:auto;margin-bottom:3vh;flex-direction:row}
.menu{display:flex;flex-direction:column;gap:14px;align-items:center;flex-wrap:wrap;justify-content:center}
.btn{font:inherit;font-size:22px;font-weight:700;padding:14px 28px;min-width:170px;border-radius:14px;border:3px solid #fbf6ec;background:#4a3f33;color:#fbf6ec;cursor:pointer;transition:background .2s}
.btn:hover{background:#5d5042}
.btn.main{background:#2f6b4f}
.btn.small{font-size:17px;padding:8px 14px;min-width:0}
.large .btn{font-size:28px}.large .btn.small{font-size:21px}
:focus{outline:none}
.kbd :focus,.kbd .card:focus{outline:6px solid #ffd84a;outline-offset:3px}
.panel{background:#3a3229;border:3px solid #fbf6ec33;border-radius:20px;padding:4vh 5vw;text-align:center;max-width:92vw}
.panel h2{font-size:clamp(26px,5vh,44px);margin-bottom:12px}
.panel p{font-size:clamp(20px,3.4vh,30px);margin-bottom:22px;line-height:1.3}
#s-game{justify-content:flex-start}
.bar{width:100%;display:flex;align-items:center;gap:12px;padding:6px 12px;min-height:52px}
.score{font-size:22px;font-weight:700;display:flex;gap:16px;white-space:nowrap}
.large .score{font-size:26px}
.score .p1{color:#7fb8ff}.score .p2{color:#ffad66}
.turn{flex:1;text-align:center;font-size:24px;font-weight:800;padding:4px 10px;border-radius:10px}
.large .turn{font-size:28px}
.turn.p1{background:#1f5fae}.turn.p2{background:#c4621a}
.bar-btns{margin-left:auto;display:flex;gap:10px}
#board-wrap{flex:1;width:100%;display:flex;align-items:center;justify-content:center;padding:6px}
#board{display:grid;gap:10px;padding:10px;border-radius:16px;border:4px solid transparent;transition:box-shadow .4s,border-color .4s}
#board.g1{border-color:#3d8bff;box-shadow:0 0 22px #3d8bffaa}
#board.g2{border-color:#ff8a2a;box-shadow:0 0 22px #ff8a2aaa}
.card{position:relative;border:0;background:none;padding:0;cursor:pointer;perspective:800px;border-radius:12px;font:inherit}
.inner{position:absolute;inset:0;transition:transform .35s ease;transform-style:preserve-3d}
.card.up .inner{transform:rotateY(180deg)}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:12px;overflow:hidden}
.back{background:#f1e8d6 url("../img/card-back.webp") center/contain no-repeat}
.front{transform:rotateY(180deg);background:#f7f2e8;display:flex;flex-direction:column;border:4px solid #f7f2e8}
.front img{flex:1;min-height:0;width:100%;object-fit:contain;background:#efe8da}
.front span{background:#f7f2e8;color:#1d1a16;font-weight:700;text-align:center;line-height:1.1;padding:3px 2px;font-size:var(--lf,18px);white-space:nowrap;overflow:hidden;flex:0 0 var(--lh,22px);display:block;line-height:var(--lh,22px);padding:0 1px}
.card.m0 .front{border-color:#3cae5c}.card.m1 .front{border-color:#3d8bff}.card.m2 .front{border-color:#ff8a2a}
#s-game.side{flex-direction:row}
#s-game.side .bar{flex-direction:column;width:auto;max-width:200px;height:100%;justify-content:center;padding:8px}
#s-game.side .score{flex-direction:column;gap:6px;white-space:normal}
#s-game.side .turn{flex:0;font-size:20px}
#s-game.side .bar-btns{margin:0;flex-direction:column}
#s-game.side #board-wrap{height:100%}
#s-game.side #board{padding:4px;border-width:3px}
.rotate{display:none;position:fixed;inset:0;z-index:50;background:#1e1a15;color:#fbf6ec;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;gap:12px}
.rotate h2{font-size:28px}.rotate p{font-size:20px}.rot-icon{font-size:56px}
@media (orientation:portrait) and (max-width:900px){.rotate{display:flex}}
.btn{white-space:nowrap}
#s-game.side .front{border-width:2px}