*{box-sizing:border-box;margin:0;padding:0}
:root{--crema:#fff6e3;--tinta:#3c2a1e;--rojo:#c83f2e;--verde:#0b6e3f;--barro:#7a4f21;--oro:#e9a63c}
html,body{min-height:100%}
body{font-family:Georgia,"Times New Roman",serif;background:var(--crema);color:var(--tinta);background-image:radial-gradient(rgba(122,79,33,.07) 1px,transparent 1px),linear-gradient(180deg,#fff9ec,#f7e8cd);background-size:18px 18px,100% 100%;padding-bottom:28px}
.hidden{display:none!important}
header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px 4px;flex-wrap:wrap}
h1{font-size:clamp(1.4rem,5vw,2.2rem);color:#7e2013;letter-spacing:.04em;text-shadow:1px 1px 0 #e9a63c}
.chipset{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:6px;background:#fffdf4;border:2px solid var(--barro);border-radius:999px;padding:4px 10px;font-size:.8rem;font-weight:700}
.dot{width:10px;height:10px;border-radius:50%;background:var(--verde)}
button{font-family:inherit;font-size:1rem;font-weight:700;color:#fffdf4;background:linear-gradient(180deg,#e05a41,var(--rojo));border:3px solid #7e2013;border-radius:12px;padding:10px 16px;cursor:pointer;box-shadow:0 3px 0 #7e2013}
button:active{transform:translateY(2px);box-shadow:0 1px 0 #7e2013}
button.ghost{background:linear-gradient(180deg,#3f9a6c,var(--verde));border-color:#075130;box-shadow:0 3px 0 #075130}
#muteBtn{padding:6px 10px;font-size:.95rem}
.papel{height:16px;margin:6px 0 14px;background:repeating-linear-gradient(90deg,var(--rojo) 0 14px,var(--oro) 14px 28px,var(--verde) 28px 42px);clip-path:polygon(0 0,100% 0,100% 40%,96% 100%,92% 40%,88% 100%,84% 40%,80% 100%,76% 40%,72% 100%,68% 40%,64% 100%,60% 40%,56% 100%,52% 40%,48% 100%,44% 40%,40% 100%,36% 40%,32% 100%,28% 40%,24% 100%,20% 40%,16% 100%,12% 40%,8% 100%,4% 40%,0 100%)}
main{max-width:980px;margin:0 auto;padding:0 12px}
.setup{max-width:520px;margin:0 auto;background:#fffdf4;border:3px solid var(--barro);border-radius:18px;padding:20px;display:grid;gap:12px;box-shadow:0 10px 24px rgba(60,42,30,.18)}
.setup h2{color:#7e2013;font-size:1.3rem}
.setup label{display:grid;gap:6px;font-weight:700;font-size:.9rem}
.setup label.check{grid-template-columns:auto 1fr;align-items:center;gap:8px}
.setup input[type=text],.setup select{font-family:inherit;font-size:1rem;padding:9px;border:2px solid var(--barro);border-radius:10px;background:#fff}
.setup input[type=checkbox]{width:20px;height:20px;accent-color:var(--rojo)}
#patDesc{font-size:.85rem;color:#5c4331;font-style:italic}
.setup .blurb{font-size:.85rem;color:#5c4331;border-left:4px solid var(--oro);padding-left:10px}
.game{display:grid;grid-template-columns:minmax(240px,340px) 1fr;gap:16px;align-items:start}
@media(max-width:760px){.game{grid-template-columns:1fr}}
.panel{background:#fffdf4;border:3px solid var(--barro);border-radius:18px;padding:14px;box-shadow:0 10px 24px rgba(60,42,30,.16)}
#caller{position:relative}
.cardface{position:relative;background:#fffaf0;border:3px solid #3c2a1e;border-radius:14px;padding:14px 10px;display:grid;justify-items:center;gap:8px;box-shadow:inset 0 0 0 2px #fffaf0,inset 0 0 0 4px var(--oro),0 8px 16px rgba(60,42,30,.22);background-image:radial-gradient(rgba(122,79,33,.05) 1px,transparent 1px);background-size:10px 10px;min-height:190px}
.cardface.deal{animation:deal .55s ease-out}
.cf-emoji,#cfEmoji{font-size:clamp(2.6rem,9vw,3.6rem);line-height:1.25;filter:drop-shadow(0 3px 2px rgba(0,0,0,.18))}
.cf-name,#cfName{font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:#7e2013;font-size:1.05rem;text-align:center}
.cf-verse,#cfVerse{font-size:.85rem;font-style:italic;color:#5c4331;text-align:center;min-height:2.4em}
.cf-verse.typing::after{content:"▌";color:var(--rojo)}
.cardface.deal .cf-verse{animation:versein .6s ease-out}
@keyframes deal{0%{opacity:.25;filter:blur(3px)}100%{opacity:1;filter:blur(0)}}
@keyframes versein{0%{opacity:.4}100%{opacity:1}}
@keyframes fadein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes pulse{0%{transform:scale(1)}45%{transform:scale(1.07)}100%{transform:scale(1)}}
@keyframes pop{0%{transform:scale(0) rotate(-30deg)}60%{transform:scale(1.25) rotate(8deg)}100%{transform:scale(1) rotate(0)}}
@keyframes beam{0%,100%{box-shadow:inset 0 0 0 3px #fffdf4,inset 0 0 0 5px #c83f2e,0 8px 16px rgba(60,42,30,.25)}50%{box-shadow:inset 0 0 0 3px #fffdf4,inset 0 0 0 5px #c83f2e,0 0 26px 6px rgba(233,166,60,.8)}}
.callctl{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:14px}
.remain{text-align:center;margin-top:10px;font-weight:800;color:#0b6e3f;font-size:1rem}
#autoBtn.on{background:linear-gradient(180deg,#189a58,#0b6e3f);border-color:#075130;box-shadow:0 3px 0 #075130}
#history{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:10px}
#history span{min-width:34px;height:34px;padding:0 6px;display:grid;place-items:center;font-size:1.15rem;background:#f2e2c6;border:2px solid #b08968;border-radius:8px}
#history span.now{border-color:#c83f2e;background:#fff}
#board{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.tile{position:relative;background:#fffdf4;border:3px solid #7a4f21;border-radius:12px;padding:8px 4px 10px;display:grid;justify-items:center;gap:4px;cursor:pointer;font-family:inherit;text-align:center;min-height:0;box-shadow:inset 0 0 0 2px #fffdf4,inset 0 0 0 3px #b08968,0 4px 10px rgba(60,42,30,.16);background-image:radial-gradient(rgba(122,79,33,.06) 1px,transparent 1px);background-size:12px 12px;transition:transform .15s,box-shadow .2s}
.tile:hover,.tile:focus-visible{transform:translateY(-2px);box-shadow:inset 0 0 0 2px #fffdf4,inset 0 0 0 3px #c83f2e,0 6px 14px rgba(60,42,30,.22);outline:none}
.tile .te{font-size:clamp(1.6rem,6vw,2.3rem);line-height:1;filter:drop-shadow(0 2px 1px rgba(0,0,0,.18))}
.tile .tn{font-size:clamp(.6rem,2.3vw,.78rem);font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#7e2013}
.tile.dealt{animation:fadein .4s ease-out both}
.tile.marked{background:#fbf0d8}
.tile.marked .tn{color:#0b6e3f}
.tile.just{animation:pulse .45s ease-out}
.bean{position:absolute;top:6px;right:6px;width:26px;height:26px;border-radius:50% 50% 48% 52%/55% 45% 55% 45%;background:radial-gradient(circle at 34% 28%,#f0a58a,#c83f2e 55%,#7e2013 100%);box-shadow:0 2px 4px rgba(0,0,0,.35),inset -2px -3px 4px rgba(0,0,0,.3);animation:pop .3s ease-out}
.bean::after{content:"";position:absolute;left:50%;top:38%;width:2px;height:52%;background:rgba(255,240,220,.55);transform:translateX(-50%) rotate(14deg);border-radius:2px}
.boardwrap{position:relative}
.frozen .tile{cursor:default;pointer-events:none}
#over{position:fixed;inset:0;background:rgba(38,24,15,.72);display:grid;place-items:center;z-index:50;padding:16px}
.modal{position:relative;background:#fffaf0;border:3px solid #3c2a1e;border-radius:20px;padding:26px 22px;max-width:420px;width:100%;text-align:center;box-shadow:0 16px 40px rgba(0,0,0,.45);animation:fadein .35s ease-out;z-index:2}
#banner{font-size:clamp(1.9rem,8vw,2.9rem);color:#c83f2e;letter-spacing:.06em;margin-bottom:4px}
#banner.win{animation:pulse 1.1s ease-in-out infinite}
#banner.lose{color:#7e2013}
.tile.miss{animation:shake .4s ease;border-color:#7e2013}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
#patName{font-weight:800;color:#0b6e3f;margin-bottom:14px}
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:14px 0;font-size:.9rem}
.stats div{background:#f2e2c6;border:2px solid #b08968;border-radius:10px;padding:8px}
.stats b{display:block;font-size:1.15rem;color:#7e2013}
.modal .row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:6px}
#confetti{position:fixed;inset:0;pointer-events:none;z-index:60;overflow:hidden}
.conf{position:absolute;width:9px;height:14px;border-radius:2px;animation:fall linear forwards}
@keyframes fall{0%{transform:translateY(-12vh) rotate(0)}100%{transform:translateY(112vh) rotate(720deg)}}
@media(max-width:420px){.game{gap:12px}.panel{padding:10px}#board{gap:6px}header{padding:8px 10px 2px}}