/* Tablón de misiones · Favor de Jack */
.tablon-page{
    --wood-dark:#2a170c;
    --wood:#5a341a;
    --wood-light:#7a4a26;
    --parch:#f1dca8;
    --ink:#2a1a0e;
    --stamp:#c0221b;
    margin:0;
    min-height:100vh;
    background:#140c07 radial-gradient(ellipse at 50% 0,#3a2214 0,#140c07 70%) fixed;
    color:var(--favor-ink,#f1e4c6);
    font-family:var(--favor-font,'EB Garamond',Georgia,serif);
}
.tablon-shell{width:min(100% - 32px,1500px);margin:0 auto;padding:18px 0 calc(var(--favor-tab-h,64px) + 28px)}

/* Cartel de madera */
.tablon-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;margin-bottom:10px}
.tablon-sign{
    position:relative;padding:14px 46px 12px;border-radius:6px;text-align:center;
    background:
        repeating-linear-gradient(90deg,rgba(0,0,0,.12) 0 2px,transparent 2px 9px),
        linear-gradient(180deg,#80502b,#5a341a 55%,#432612);
    box-shadow:inset 0 2px 0 rgba(255,220,160,.25),inset 0 -3px 0 rgba(0,0,0,.35),0 10px 22px rgba(0,0,0,.5);
    border:2px solid #2a170c;
}
.tablon-sign h1{margin:0;font-family:var(--favor-title,'Cinzel',serif);font-size:clamp(1.35rem,3.2vw,2.2rem);letter-spacing:.06em;color:#f5d590;text-shadow:0 2px 0 #2a170c,0 0 14px rgba(245,213,144,.25)}
.tablon-sign p{margin:2px 0 0;font-style:italic;color:#e6cf9f;font-size:.98rem}
.tablon-sign-nail{position:absolute;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#d8d8d8,#555 55%,#1b1b1b);box-shadow:0 1px 2px #000}
.tablon-sign-nail:first-child{left:16px}
.tablon-sign-nail:last-of-type{right:16px}
.tablon-tools{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.tablon-counts{margin:0;color:#d8c49a;font-size:1.02rem}
.tablon-hint{margin:4px 0 10px;color:#bba987;font-size:.95rem}
.tablon-hint-mobile{display:none}

.tablon-btn{
    appearance:none;border:1px solid rgba(224,185,111,.55);border-radius:8px;padding:9px 16px;
    background:linear-gradient(#3a2414,#26170c);color:#f1e4c6;font:600 1rem var(--favor-font,'EB Garamond',serif);
    cursor:pointer;transition:transform .15s,box-shadow .15s,background .15s;text-decoration:none;display:inline-flex;align-items:center;gap:6px;min-height:42px
}
.tablon-btn:hover,.tablon-btn:focus-visible{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.4);border-color:#f5d590}
.tablon-btn:disabled{opacity:.55;cursor:wait;transform:none}
.tablon-btn-main{background:linear-gradient(#e7c27a,#b98a3e);color:#1a1006;border-color:#f5d590}
.tablon-btn.danger{background:linear-gradient(#8e2a20,#5e1711);border-color:#e0806f;color:#fff2ea}

/* Tablón */
.tablon-scroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;padding:4px 2px 14px;border-radius:14px}
.tablon-board{
    position:relative;min-width:780px;aspect-ratio:3/2;padding:clamp(18px,2.6%,38px);box-sizing:border-box;border-radius:10px;
    background:
        repeating-linear-gradient(90deg,rgba(0,0,0,.16) 0 3px,transparent 3px 14px),
        linear-gradient(180deg,#6d4122,#4a2a14);
    box-shadow:inset 0 0 0 3px #2a170c,inset 0 0 22px rgba(0,0,0,.65),0 18px 40px rgba(0,0,0,.6);
}
.tablon-surface{
    position:relative;width:100%;height:100%;overflow:hidden;border-radius:3px;
    background-color:#5b3419;background-size:cover;background-position:center;
    background-image:
        radial-gradient(ellipse at 50% 45%,rgba(255,190,110,.12),rgba(0,0,0,.45) 85%),
        repeating-linear-gradient(180deg,transparent 0 calc(12.5% - 3px),rgba(20,8,2,.75) calc(12.5% - 3px) 12.5%),
        repeating-linear-gradient(90deg,rgba(0,0,0,.07) 0 1px,transparent 1px 7px,rgba(255,220,170,.04) 7px 9px,transparent 9px 23px),
        linear-gradient(90deg,#6a3d1d,#5a3317 30%,#6e4120 55%,#553016 80%,#683c1c);
    box-shadow:inset 0 0 0 2px #1d0f06,inset 0 0 50px rgba(0,0,0,.6);
    touch-action:pan-x pan-y;
}
/* Tablón dibujado por Cal (tablon/papeles/tablon.webp): trae su propio marco. Los
   rellenos dejan los papeles dentro de las tablas (en % del ancho, el tablón es 3:2). */
.tablon-board.has-image{padding:4.5% 4.75% 4.4%;background-size:100% 100%;background-repeat:no-repeat;box-shadow:0 18px 40px rgba(0,0,0,.6)}
.tablon-board.has-image .tablon-surface{background:none;box-shadow:none}
.tablon-board.has-image .tablon-bolt{display:none}
.tablon-bolt{position:absolute;width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#bdbdbd,#4a4a4a 55%,#151515);box-shadow:0 1px 3px #000}
.tablon-bolt.b1{left:10px;top:10px}.tablon-bolt.b2{right:10px;top:10px}.tablon-bolt.b3{left:10px;bottom:10px}.tablon-bolt.b4{right:10px;bottom:10px}
.tablon-empty{position:absolute;inset:40% 20% auto;margin:0;padding:18px;text-align:center;font-size:1.25rem;font-style:italic;color:#f1dca8;background:rgba(20,10,4,.55);border-radius:10px}

/* Papel */
.paper{position:relative;container-type:inline-size;aspect-ratio:var(--ratio,.72);user-select:none;-webkit-user-select:none}
.paper-img{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none}
.paper-text{position:absolute;overflow:hidden;display:flex;align-items:center;justify-content:center;text-align:center;line-height:1.15;font-size:8cqw}
.paper-fit{width:100%;max-height:100%;box-sizing:border-box;padding:0 .35em;overflow-wrap:anywhere}
.paper-text h3{margin:0 0 .25em;font-size:1.22em;line-height:1.05;font-weight:700}
.paper-text p{margin:0;white-space:pre-line}
.paper-text .paper-reward{margin-top:.45em;font-weight:700;font-style:italic}
.paper-ink{position:absolute;inset:0;pointer-events:none}
.paper.is-broken .paper-text{opacity:.85}
.paper.on-board{
    position:absolute;left:calc(var(--x) * 1%);top:calc(var(--y) * 1%);width:calc(var(--w) * 1%);
    transform:translate(-50%,-50%) rotate(var(--rot,0deg));transform-origin:50% 8%;
    filter:drop-shadow(0 6px 8px rgba(0,0,0,.45));cursor:pointer;transition:filter .2s,transform .2s;touch-action:none
}
body:not(.is-admin) .paper.on-board{touch-action:manipulation}
.paper.on-board:hover,.paper.on-board:focus-visible{filter:drop-shadow(0 10px 14px rgba(0,0,0,.6)) brightness(1.05);transform:translate(-50%,-50%) rotate(calc(var(--rot,0deg) * .6)) scale(1.03);outline:none}
.paper.on-board.is-dragging{transition:none;cursor:grabbing;filter:drop-shadow(0 18px 20px rgba(0,0,0,.6));transform:translate(-50%,-52%) rotate(0deg) scale(1.06)}
.is-admin .paper.on-board{cursor:grab}
.paper.on-board:hover{animation:paper-sway 1.6s ease-in-out infinite}
.paper.on-board.is-dragging{animation:none}
@keyframes paper-sway{0%,100%{rotate:0deg}50%{rotate:.8deg}}

/* Retratos clavados en el papel */
.paper-party{position:absolute;left:4%;right:4%;bottom:-6%;display:flex;justify-content:center;pointer-events:none}
.paper-face{
    width:22cqw;aspect-ratio:1;margin:0 -2.5cqw;border-radius:1.5cqw;overflow:hidden;display:grid;place-items:center;
    background:#3a2414;border:1.2cqw solid #e9d3a1;box-shadow:0 1.5cqw 2.5cqw rgba(0,0,0,.55);transform:rotate(-4deg);position:relative
}
.paper-face:nth-child(2n){transform:rotate(5deg)}
.paper-face img{width:100%;height:100%;object-fit:cover;object-position:50% 15%}
.paper-face b{font:700 10cqw var(--favor-title,'Cinzel',serif);color:#f1dca8}
.paper-face.more{font:700 7cqw var(--favor-title,'Cinzel',serif);color:#f1dca8}
.paper-face::before{content:"";position:absolute;top:2cqw;left:50%;width:3cqw;height:3cqw;margin-left:-1.5cqw;border-radius:50%;background:radial-gradient(circle at 35% 35%,#ddd,#555 60%,#111);z-index:1}

/* Sellos y cinta */
.paper-stamp{
    position:absolute;left:50%;top:46%;padding:.18em .45em;transform:translate(-50%,-50%) rotate(-24deg);
    font:600 12cqw/1 var(--favor-title,'Cinzel',serif);letter-spacing:.04em;white-space:nowrap;color:var(--stamp);-webkit-text-stroke:.35cqw var(--stamp);
    background:rgba(192,34,27,.08);border:2.2cqw double var(--stamp);border-radius:2cqw;opacity:.88;mix-blend-mode:multiply;pointer-events:none
}
.paper-stamp.bad{font-size:9.5cqw;transform:translate(-50%,-50%) rotate(-18deg)}
.paper-ribbon{
    position:absolute;top:5%;right:-4%;padding:.25em .8em;transform:rotate(14deg);font:700 6.5cqw var(--favor-title,'Cinzel',serif);
    color:#fff4dc;background:linear-gradient(#2f5f3a,#1f4227);box-shadow:0 1cqw 2cqw rgba(0,0,0,.5);pointer-events:none
}

/* Animaciones */
.paper.anim-pin{animation:paper-pin .55s cubic-bezier(.2,1.4,.4,1)}
@keyframes paper-pin{0%{opacity:0;transform:translate(-50%,-70%) rotate(calc(var(--rot,0deg) - 12deg)) scale(1.15)}100%{opacity:1}}
.paper.anim-stamp .paper-stamp{animation:stamp-slam .5s cubic-bezier(.3,1.6,.5,1) both}
@keyframes stamp-slam{0%{opacity:0;transform:translate(-50%,-50%) rotate(-24deg) scale(2.6)}70%{opacity:.9;transform:translate(-50%,-50%) rotate(-24deg) scale(.94)}100%{opacity:.9;transform:translate(-50%,-50%) rotate(-24deg) scale(1)}}
.paper.anim-break{animation:paper-rip .6s ease-out}
@keyframes paper-rip{0%{transform:translate(-50%,-50%) rotate(var(--rot,0deg))}20%{transform:translate(-52%,-50%) rotate(calc(var(--rot,0deg) - 4deg))}40%{transform:translate(-48%,-49%) rotate(calc(var(--rot,0deg) + 4deg))}60%{transform:translate(-51%,-50%) rotate(calc(var(--rot,0deg) - 2deg))}100%{transform:translate(-50%,-50%) rotate(var(--rot,0deg))}}
@media (prefers-reduced-motion:reduce){.paper,.paper *{animation:none!important;transition:none!important}}

/* Mensajes */
.tablon-guest{max-width:520px;margin:40px auto;padding:28px;text-align:center;border-radius:14px;background:rgba(40,24,12,.8);border:1px solid rgba(224,185,111,.4)}
.tablon-guest h2{font-family:var(--favor-title,'Cinzel',serif);color:#f5d590;margin-top:0}
.tablon-error{padding:10px 14px;border-radius:8px;background:#5e1711;color:#ffe6df}
.tablon-toast{
    position:fixed;left:50%;bottom:calc(var(--favor-tab-h,64px) + 18px);z-index:200;transform:translateX(-50%);margin:0;max-width:min(92vw,520px);
    padding:11px 18px;border-radius:10px;background:#f1dca8;color:#2a1a0e;font-weight:600;box-shadow:0 10px 26px rgba(0,0,0,.55)
}
.tablon-toast.show{animation:toast-in .3s ease-out}
@keyframes toast-in{from{opacity:0;transform:translate(-50%,12px)}}
@media (min-width:900px){.tablon-toast{bottom:24px}}

/* Diálogos */
.tablon-dialog{
    width:min(94vw,860px);max-height:92vh;padding:0;border:0;border-radius:14px;overflow:auto;
    background:linear-gradient(180deg,#f4e3b9,#e7cf98);color:var(--ink);box-shadow:0 30px 70px rgba(0,0,0,.7),inset 0 0 0 2px #8a5a2b,inset 0 0 40px rgba(120,70,20,.35)
}
.tablon-dialog.dlg-wide{width:min(96vw,1080px)}
.tablon-dialog.dlg-small{width:min(94vw,460px)}
.tablon-dialog::backdrop{background:rgba(10,5,2,.72);backdrop-filter:blur(2px)}
.tablon-dialog[open]{animation:dlg-in .22s ease-out}
@keyframes dlg-in{from{opacity:0;transform:translateY(14px) scale(.98)}}
.dlg-body{padding:22px 24px}
.tablon-dialog h2{margin:0 0 8px;font-family:var(--favor-title,'Cinzel',serif);font-size:1.45rem;color:#4a2610}
.dlg-close{position:absolute;top:8px;right:10px;width:40px;height:40px;border:0;border-radius:50%;background:transparent;font-size:1.8rem;line-height:1;color:#4a2610;cursor:pointer}
.dlg-close:hover{background:rgba(74,38,16,.12)}
.dlg-actions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:10px;margin-top:14px}
.tablon-dialog .tablon-btn:not(.tablon-btn-main):not(.danger){background:#fff6df;color:#3a2010;border-color:#a87a45}
.dlg-error{margin:10px 0 0;padding:8px 12px;border-radius:8px;background:#f6d2c8;color:#6d140c;font-weight:600}
.tablon-dialog label{display:block;margin:10px 0 0;font-weight:600;color:#4a2610}
.tablon-dialog label small{font-weight:400;color:#6d4a2a}
.tablon-dialog input,.tablon-dialog textarea{
    display:block;width:100%;box-sizing:border-box;margin-top:4px;padding:9px 11px;border:1px solid #a87a45;border-radius:8px;
    background:#fffaf0;color:#24160c;font:1.02rem var(--favor-font,'EB Garamond',serif)
}
.tablon-dialog textarea{resize:vertical}
.tablon-dialog input:focus,.tablon-dialog textarea:focus{outline:2px solid #b98a3e;outline-offset:1px}
.tablon-dialog fieldset{border:0;margin:10px 0 0;padding:0;min-width:0}
.tablon-dialog legend{padding:0;font-weight:600;color:#4a2610}
.req{color:#a3271c}

/* Ver */
/* Ver: el papel en grande (lo más alto que quepa en la pantalla). */
#dlg-view{width:min(96vw,1180px)}
.dlg-view{display:grid;grid-template-columns:minmax(0,auto) minmax(260px,1fr);gap:28px;align-items:start}
.view-paper{display:flex;justify-content:center}
.view-paper .paper{width:min(540px,calc(78vh * var(--ratio)));max-width:100%;filter:drop-shadow(0 10px 16px rgba(0,0,0,.4))}
.view-stars{margin:6px 0;font-size:1.3rem;letter-spacing:.12em;color:#1f8fd8}

/* Caza de cabezas */
.paper-hunt{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;pointer-events:none}
.hunt-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:50% 40%;mix-blend-mode:multiply;filter:sepia(.25) contrast(1.05) saturate(.9)}
.hunt-stars{position:relative;display:flex;justify-content:center;gap:1.5cqw;margin-bottom:-2%}
.hunt-stars img{width:13cqw;height:auto;filter:drop-shadow(0 0 .8cqw rgba(255,255,255,.9)) drop-shadow(0 .6cqw 1cqw rgba(0,0,0,.45))}
.paper.anim-pin .hunt-stars img{animation:star-pop .6s cubic-bezier(.3,1.6,.5,1) both}
.paper.anim-pin .hunt-stars img:nth-child(2){animation-delay:.08s}
.paper.anim-pin .hunt-stars img:nth-child(3){animation-delay:.16s}
.paper.anim-pin .hunt-stars img:nth-child(4){animation-delay:.24s}
.paper.anim-pin .hunt-stars img:nth-child(5){animation-delay:.32s}
@keyframes star-pop{from{opacity:0;transform:scale(.2) rotate(-40deg)}}
/* Cartel propio eliminado: se corta de abajo y se oscurece (no tiene versión rota dibujada). */
.paper.is-torn .paper-img,.paper.is-torn .paper-hunt{clip-path:polygon(0 0,100% 0,100% 52%,91% 57%,84% 51%,76% 60%,66% 54%,57% 63%,47% 55%,38% 62%,27% 53%,18% 60%,9% 52%,0 58%)}
.paper.is-torn .paper-img{filter:sepia(.4) brightness(.8)}
.own-poster{display:grid;place-items:center;height:62px;font-size:2rem}

/* Historia */
.history-hint{margin:0 0 10px}
.history-tools{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:14px}
.history-tools input{flex:1 1 220px;margin:0}
.history-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
.history-card{
    display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 10px;border:1px solid #c9a46a;border-radius:12px;
    background:linear-gradient(#6a3d1d,#4a2a14);cursor:pointer;color:inherit;font:inherit;text-align:center;transition:transform .15s,box-shadow .15s
}
.history-card:hover,.history-card:focus-visible{transform:translateY(-3px);box-shadow:0 10px 20px rgba(0,0,0,.35);outline:none}
.history-paper{display:flex;justify-content:center;align-items:flex-start;width:100%;height:180px}
.history-paper .paper{width:min(140px,calc(180px * var(--ratio)));filter:drop-shadow(0 5px 7px rgba(0,0,0,.5))}
.history-info{display:flex;flex-direction:column;align-items:center;gap:4px;color:#f1e4c6}
.history-info strong{font-family:var(--favor-title,'Cinzel',serif);font-size:.98rem;line-height:1.15}
.history-info small{color:#e6cf9f;font-size:.82rem}
.history-empty{grid-column:1/-1;margin:20px 0;text-align:center;font-style:italic}
.view-state{margin:0 0 6px}
.chip{display:inline-block;padding:2px 10px;border-radius:999px;background:#e6cf9f;border:1px solid #a87a45;font-size:.88rem;font-weight:600;color:#4a2610}
.chip-publicada{background:#f7e7bd}
.chip-en-curso{background:#2f5f3a;color:#fff4dc;border-color:#1f4227}
.chip-completada{background:#c0221b;color:#fff;border-color:#8e1d16}
.chip-fallida{background:#4a3a30;color:#fff;border-color:#2a1f18}
.chip-cancelada{background:#7a6a5a;color:#fff;border-color:#4a3a30}
.view-reward{margin:6px 0;font-size:1.08rem}
.view-text{white-space:pre-line;font-size:1.08rem;margin:8px 0}
.view-more{white-space:pre-line;margin:8px 0;padding:10px 12px;border-left:3px solid #b98a3e;background:rgba(255,250,235,.55);border-radius:0 8px 8px 0}
.view-party h3{margin:14px 0 6px;font-family:var(--favor-title,'Cinzel',serif);font-size:1.05rem;color:#4a2610}
.view-party ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.view-party li{display:flex;align-items:center;gap:8px;padding:4px 10px 4px 4px;border-radius:999px;background:rgba(255,250,235,.7);border:1px solid #c9a46a}
.view-party img,.face-fallback{width:38px;height:38px;border-radius:50%;object-fit:cover;object-position:50% 15%;background:#3a2414;color:#f1dca8;display:grid;place-items:center;font-weight:700}
.view-party small{display:block;font-size:.8rem;color:#6d4a2a}
.view-reason{margin:12px 0 0}
.view-meta{margin:10px 0 0;font-size:.88rem;color:#6d4a2a}
.view-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.view-actions:empty{display:none}

/* Ingresar */
.dlg-edit{display:grid;grid-template-columns:1fr minmax(0,330px);gap:24px}
.paper-choices{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-top:6px}
.paper-choices button{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 4px;border:2px solid transparent;border-radius:10px;background:rgba(255,250,235,.5);cursor:pointer;font:600 .85rem var(--favor-font,serif);color:#4a2610}
.paper-choices img{width:100%;height:62px;object-fit:contain}
.paper-choices button[aria-pressed="true"]{border-color:#b98a3e;background:#fff6df;box-shadow:0 0 0 2px rgba(185,138,62,.35)}
.edit-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.edit-looks{grid-template-columns:auto 1fr auto}
.seg{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.seg button{padding:6px 10px;min-height:38px;border:1px solid #a87a45;border-radius:8px;background:#fffaf0;cursor:pointer;font:1rem var(--favor-font,serif);color:#3a2010;display:inline-flex;align-items:center;gap:6px}
.seg button span{font-size:1.15rem}
.seg button i{width:14px;height:14px;border-radius:50%;display:inline-block}
.seg button[aria-pressed="true"]{background:#4a2610;color:#f5d590;border-color:#4a2610}
.edit-warn{margin:8px 0 0;padding:8px 12px;border-radius:8px;background:#f8e3b0;border:1px solid #c9952e;color:#5a3a06;font-size:.95rem}
.edit-preview{position:sticky;top:0;align-self:start}
.edit-preview-label{margin:0 0 8px;font-family:var(--favor-title,'Cinzel',serif);color:#4a2610;text-align:center}
.edit-preview-stage{
    display:grid;place-items:center;min-height:360px;padding:22px 16px;border-radius:12px;
    background:repeating-linear-gradient(180deg,#6a3d1d 0 58px,#2a1508 58px 61px),linear-gradient(90deg,#6a3d1d,#5a3317);box-shadow:inset 0 0 26px rgba(0,0,0,.6)
}
.edit-preview-stage .paper{width:100%;max-width:290px;filter:drop-shadow(0 8px 10px rgba(0,0,0,.5))}

/* Iniciar */
.start-hint{margin:0 0 12px}
.start-players{display:flex;gap:10px;overflow-x:auto;padding:4px 2px 10px}
.start-player{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:4px;width:78px;padding:6px 2px;border:2px solid transparent;border-radius:12px;background:transparent;cursor:pointer;font:600 .9rem var(--favor-font,serif);color:#4a2610}
.start-player-face{width:58px;height:58px;border-radius:50%;overflow:hidden;display:grid;place-items:center;font-size:1.6rem;background:var(--bg,#22402F);border:3px solid #c9a46a;box-shadow:0 3px 8px rgba(0,0,0,.35);transition:transform .15s}
.start-player-face b{font-size:1.6rem}
.start-player-face img{width:100%;height:100%;object-fit:cover}
.start-player:hover .start-player-face{transform:scale(1.07)}
.start-player[aria-selected="true"]{border-color:#b98a3e;background:#fff6df}
.start-main{display:grid;grid-template-columns:1fr minmax(0,340px);gap:18px;align-items:start}
.start-chars-title{margin:0 0 8px;font-weight:600;color:#4a2610}
.char-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px}
.char-card{
    position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 6px;border-radius:10px;text-align:center;
    background:#fffaf0;border:1px solid #c9a46a;box-shadow:0 2px 6px rgba(0,0,0,.18);cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;transition:transform .15s,box-shadow .15s
}
.char-card:hover,.char-card:focus-visible{transform:translateY(-2px);box-shadow:0 6px 14px rgba(0,0,0,.25);outline:none}
.char-card.in-party{background:#e9f2df;border-color:#4f7a4a}
.char-card.is-out{opacity:.6}
.char-face{width:74px;height:74px;border-radius:8px;overflow:hidden;background:#3a2414;display:grid;place-items:center;color:#f1dca8;font:700 1.6rem var(--favor-title,serif)}
.char-face img{width:100%;height:100%;object-fit:cover;object-position:50% 15%}
.char-name{font-weight:600;font-size:.95rem;line-height:1.15;color:#2a1a0e}
.char-name small{display:block;font-weight:400;font-size:.78rem;color:#6d4a2a}
.char-name .char-state{color:#8e1d16}
.char-remove{position:absolute;top:2px;right:6px;font-size:1.2rem;color:#8e1d16}
.char-ghost{position:fixed;z-index:1000;width:110px;pointer-events:none;transform:translate(-50%,-50%) rotate(-4deg) scale(1.05);box-shadow:0 14px 26px rgba(0,0,0,.45);opacity:.95}
.start-drop{
    position:sticky;top:0;min-height:260px;padding:20px 16px 18px;border-radius:6px;text-align:center;
    background:radial-gradient(ellipse at 50% 40%,#f6e4b6,#dcb877 75%,#b98a3e);box-shadow:0 8px 18px rgba(0,0,0,.35),inset 0 0 30px rgba(120,70,20,.45);
    border:2px dashed transparent;transition:border-color .15s,transform .15s
}
.start-drop::before{content:"";position:absolute;top:8px;left:50%;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#ddd,#555 60%,#111)}
.start-drop.is-over{border-color:#4f7a4a;transform:scale(1.02)}
.start-drop-title{margin:8px 0 10px;font-family:'IM Fell English',Georgia,serif;font-size:1.15rem;color:#3a2010}
.start-party{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.start-party .char-face{width:60px;height:60px}
.start-drop-empty{margin:40px 0 0;font-style:italic;color:#6d4a2a}
.char-card.anim-pin{animation:card-pin .4s cubic-bezier(.2,1.5,.4,1)}
@keyframes card-pin{from{transform:scale(.6) rotate(-8deg);opacity:0}}

@media (max-width:820px){
.tablon-empty{inset:28% auto auto 14px;width:min(72vw,420px)}
    .tablon-shell{width:calc(100% - 32px)}
    .dlg-body{padding:18px 16px}
    .dlg-view,.dlg-edit,.start-main{grid-template-columns:1fr}
    .view-paper .paper{width:min(100%,calc(60vh * var(--ratio)))}
    .history-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .edit-preview{position:static}
    .edit-preview-stage{min-height:0;padding:16px}
    .edit-preview-stage .paper{max-width:210px}
    .tablon-hint-mobile{display:inline}
    .paper-choices{grid-template-columns:repeat(3,minmax(0,1fr))}
    .paper-choices img{height:46px}
    .edit-row,.edit-looks{grid-template-columns:1fr}
    .start-drop{position:static;min-height:150px}
    .tablon-dialog,.tablon-dialog.dlg-wide{width:100vw;max-width:100vw;max-height:100dvh;height:auto;border-radius:0}
}
.paper.is-broken .paper-party{display:none}
.tablon-dialog [hidden]{display:none!important}