/* 駄洒落屋台 v260912b — la nuit d'un yatai : fond noir vrai, l'illustration se dissout dedans. */
:root {
  --noir:#000; --shu:#c8232c; --shu2:#8f141b; --or:#ffc24a; --or2:#d79a2a; --bois:#a8672c; --bois2:#6b3a14;
  --papier:#fff6e2; --papier2:#f3e3c3; --encre:#2a1f1a; --discret:#8a7361; --trait:rgba(42,31,26,.16);
}
* { box-sizing:border-box }
html,body { margin:0; background:var(--noir); color:var(--encre); font:16px/1.6 "Hiragino Maru Gothic ProN","Hiragino Kaku Gothic ProN","Yu Gothic","Noto Sans JP",sans-serif; -webkit-text-size-adjust:100% }
body { min-height:100vh; display:flex; flex-direction:column }

/* ---- en-tête : panorama qui meurt dans le noir ---- */
.yatai-header { position:relative; width:100%; height:clamp(150px, 45vw, 250px); overflow:hidden; background:var(--noir) }
.yatai-header .panorama { position:absolute; left:50%; top:0; height:100%; width:auto; transform:translateX(-50%) }
/* grand écran : l image entière, à l échelle, jamais tronquée */
@media (min-width:900px) { .yatai-header { height:min(26vh, 300px) } }
/* secours css tant que l'image n'est pas déposée */
.secours { display:none } .sans-image .secours { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:.8rem; height:100%; padding:.6rem 1rem; max-width:760px; margin:0 auto;
  background:radial-gradient(ellipse at 50% 60%, rgba(150,45,15,.9), rgba(60,15,5,.6) 45%, transparent 75%) }
.lanterne { width:52px; height:74px; border-radius:26px/37px; background:radial-gradient(circle at 40% 30%, #ffd98a, var(--shu) 48%, #7a0f16 100%); box-shadow:0 0 28px rgba(255,170,60,.7), 0 0 70px rgba(255,120,40,.4); display:flex; align-items:center; justify-content:center; color:var(--papier); font-weight:800; font-size:.95rem; line-height:1.05; text-align:center; position:relative; animation:balance 3.6s ease-in-out infinite; text-shadow:0 1px 2px rgba(0,0,0,.4) }
.lanterne::before, .lanterne::after { content:""; position:absolute; left:12px; right:12px; height:5px; background:#1a120e; border-radius:3px } .lanterne::before{top:-4px} .lanterne::after{bottom:-4px} .lanterne.d { animation-delay:-1.8s }
@keyframes balance { 0%,100%{transform:rotate(-3deg)} 50%{transform:rotate(3deg)} }
.noren { text-align:center; background:linear-gradient(180deg,var(--shu),#b01c25); color:var(--papier); padding:.5rem .6rem .6rem; border-radius:3px; box-shadow:0 6px 16px rgba(0,0,0,.6) }
.titre { margin:0; font-size:2rem; font-weight:900; letter-spacing:.1em; line-height:1.2; text-shadow:0 2px 0 var(--shu2) } .titre rt { font-size:.6rem; letter-spacing:.3em; font-weight:400; color:var(--or) }
.accroche { margin:.3rem 0 0; font-size:.76rem; letter-spacing:.12em; color:var(--or) }
.options .lang { margin-left:auto; background:transparent; border:1px solid var(--trait); color:var(--discret); font:inherit; font-size:.6rem; letter-spacing:.14em; padding:.05rem .45rem; border-radius:999px; cursor:pointer; flex:none }
.options .lang.actif { background:var(--shu); color:var(--papier); border-color:var(--shu) }

/* ---- comptoir de jeu ---- */
.app { width:min(100%, 760px); margin:0 auto; padding:.8rem .8rem 1rem; background:var(--papier); border-left:8px solid var(--bois); border-right:8px solid var(--bois); box-shadow:0 0 40px rgba(255,120,40,.12) }
.ligne { display:flex; gap:.5rem; align-items:center }
.etiquette { background:var(--shu); color:var(--papier); font-size:.66rem; letter-spacing:.2em; padding:.15rem .5rem .1rem; border-radius:3px; white-space:nowrap }
#mot { flex:1 1 8rem; min-width:5rem; font:inherit; font-size:1.5rem; letter-spacing:.06em; padding:.25rem .55rem; border:2px solid var(--bois2); border-radius:8px; background:#fff; color:var(--encre); outline:none; box-shadow:inset 0 2px 4px rgba(0,0,0,.08) }
#mot:focus { border-color:var(--shu) } #mot::placeholder { color:var(--discret); opacity:.7; font-size:1rem; letter-spacing:.04em }
.yomi { flex:1 1 6rem; min-width:0; font-size:1.15rem; letter-spacing:.1em; color:var(--shu); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.carre { width:2.8rem; height:2.8rem; flex:none; border-radius:8px; border:none; background:var(--shu); color:var(--papier); font:inherit; font-size:1.3rem; font-weight:900; cursor:pointer; box-shadow:0 3px 0 var(--shu2) }
.carre:active { transform:translateY(2px); box-shadow:0 1px 0 var(--shu2) }
.cands { display:flex; flex-wrap:wrap; gap:.3rem; padding:.3rem 0 0; font-size:.78rem; color:var(--discret) } .cands:empty { display:none }
.cands .cand { border:1px solid var(--shu); color:var(--shu); background:transparent; font:inherit; font-size:.82rem; padding:0 .5rem; border-radius:999px; cursor:pointer } .cands .cand.actif { background:var(--shu); color:var(--papier) }

/* ---- onglets ---- */
.onglets { display:flex; gap:.2rem; margin-top:.6rem; overflow-x:auto; border-bottom:3px solid var(--bois2); scrollbar-width:none } .onglets::-webkit-scrollbar { display:none }
.onglets button:not(.lang) { background:var(--papier2); border:1px solid var(--trait); border-bottom:none; font:inherit; font-size:.88rem; padding:.4rem .65rem; color:var(--discret); cursor:pointer; white-space:nowrap; border-radius:6px 6px 0 0 }
.onglets button.actif:not(.lang) { color:var(--papier); background:var(--shu); border-color:var(--shu); font-weight:700 }

/* ---- machine : roue des nombres + tambours ---- */
.machine { padding-top:.6rem } .machine[hidden] { display:none }
.tambours { display:flex; gap:.45rem; justify-content:center; align-items:stretch; padding:.7rem .5rem; background:linear-gradient(180deg,#2c0f07,#4a180a); border-radius:10px; border:4px solid var(--bois2);
  box-shadow:inset 0 6px 14px rgba(0,0,0,.6), 0 0 0 2px var(--or2), 0 6px 14px rgba(0,0,0,.4); overflow-x:auto; min-height:8.6rem }
.tambour { flex:1 1 0; min-width:4rem; max-width:9rem; position:relative; height:7.6rem; border-radius:8px; background:linear-gradient(180deg,#d9d1c1 0%,#fffaf0 18%,#fffaf0 82%,#d9d1c1 100%);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.18), inset 0 10px 12px -8px rgba(0,0,0,.5), inset 0 -10px 12px -8px rgba(0,0,0,.5); overflow:hidden }
.tambour::before, .tambour::after { content:""; position:absolute; left:0; right:0; height:1px; background:rgba(200,35,44,.55); z-index:3; pointer-events:none }
.tambour::before { top:calc(50% - 1.75rem) } .tambour::after { top:calc(50% + 1.75rem) } .tambour .son { bottom:0; height:calc(50% - 1.75rem - 1px) ; display:flex; align-items:flex-end; justify-content:center; padding-bottom:.15rem }
.rouleau { position:absolute; top:0; left:0; right:0; overflow-y:auto; height:100%; scroll-snap-type:y mandatory; scrollbar-width:none; padding:2.05rem 0; -webkit-overflow-scrolling:touch } .rouleau::-webkit-scrollbar { display:none }
.face { height:3.5rem; scroll-snap-align:center; display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1.1; user-select:none; cursor:pointer }
.face .k { font-size:1.5rem; font-weight:700; color:var(--encre) } .face .g { font-size:.58rem; color:var(--discret); max-width:8.5rem; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.tambour .son { position:absolute; bottom:.15rem; left:0; right:0; text-align:center; font-size:.6rem; letter-spacing:.14em; color:var(--shu); z-index:3; pointer-events:none; background:#fffaf0; padding-top:.05rem }
.tambour.rendaku .son::after { content:" ゛" } .tambour.particule { background:linear-gradient(180deg,#c9c1b1,#efe8da 18%,#efe8da 82%,#c9c1b1) } .tambour.particule .face .k { font-size:1.2rem; color:var(--discret) }
/* la roue noire des nombres, à gauche */
.tambour.nombre { flex:0 0 2.6rem; min-width:2.6rem; background:linear-gradient(180deg,#000 0%,#2b2b2b 18%,#2b2b2b 82%,#000 100%); box-shadow:inset 0 0 0 1px rgba(255,255,255,.15) }
.tambour.nombre::before, .tambour.nombre::after { background:rgba(255,194,74,.6) }
.tambour.nombre .face .k { color:#fff; font-size:1.7rem; font-weight:900 } .tambour.nombre .son { color:var(--or); background:#2b2b2b }
.tambours.tourne .tambour:not(.nombre) { animation:secousse .12s linear infinite }
@keyframes secousse { 0%{transform:translateY(0)} 50%{transform:translateY(1px)} 100%{transform:translateY(0)} }
.tambours .vide { color:var(--papier); font-size:.9rem; padding:1.2rem; text-align:center; width:100% }
.commandes { display:flex; align-items:center; gap:.7rem; justify-content:center; margin:.7rem 0 .2rem }
.levier { display:flex; align-items:center; gap:.5rem; background:linear-gradient(180deg,#e03a3a,var(--shu)); color:var(--papier); border:none; border-radius:999px; padding:.55rem 1.3rem .55rem .7rem; font:inherit; font-size:1.05rem; font-weight:800; letter-spacing:.2em; cursor:pointer; box-shadow:0 4px 0 var(--shu2), 0 0 18px rgba(255,120,60,.35) }
.levier .boule { font-size:1.4rem; line-height:1 }
.levier:active { transform:translateY(3px); box-shadow:0 1px 0 var(--shu2) }
.petit { background:#fff; border:2px solid var(--bois2); color:var(--bois2); font:inherit; font-size:.8rem; letter-spacing:.1em; padding:.3rem .8rem; border-radius:999px; cursor:pointer; font-weight:700 } .petit:hover { background:var(--bois2); color:var(--papier) }
.note { font-size:.76rem; color:var(--discret); text-align:center; margin:.3rem 0 .4rem; min-height:1.1rem }
.options { display:flex; flex-wrap:wrap; gap:.4rem 1.2rem; align-items:center; padding:.4rem 0 0; font-size:.78rem; color:var(--discret) }
.opt { display:flex; align-items:center; gap:.35rem } .opt input[type=range] { width:5rem; accent-color:var(--shu) } .opt input[type=checkbox] { accent-color:var(--shu); width:1.05rem; height:1.05rem }
.rime-only { display:none } .mode-rime .rime-only { display:flex }

/* ---- listes (同音, 韻, 頭, 並べ替え) ---- */
.resultats { padding-top:.5rem } .resultats:empty { display:none }
.liste { display:flex; flex-wrap:wrap; gap:.4rem }
.liste .mot { display:flex; flex-direction:column; align-items:center; padding:.3rem .55rem; background:#fff; border:1px solid var(--trait); border-radius:8px; cursor:pointer; animation:pop .3s ease both }
.liste .mot .k { font-size:1.2rem; font-weight:700 } .liste .mot .r { font-size:.66rem; color:var(--discret) } .liste .mot .g { font-size:.62rem; opacity:.75; max-width:8rem; text-align:center }
.liste .mot:hover { border-color:var(--shu) }
.vide { color:var(--discret); font-size:.9rem; padding:.8rem 0; text-align:center }
.nb { font-size:.72rem; color:var(--discret); text-align:right }
@keyframes pop { from { opacity:0; transform:translateY(6px) } to { opacity:1; transform:none } }
.face .g, .liste .mot .g { display:none } body.en .face .g, body.en .liste .mot .g { display:block }

/* ---- お持ち帰り ---- */
.emporter { padding-top:.5rem } .emporter[hidden] { display:none }
.emp-b { text-align:right; margin-bottom:.3rem }
#empTexte { width:100%; height:22rem; font:13px/1.5 "Hiragino Maru Gothic ProN","Yu Gothic",monospace; padding:.6rem; border:2px solid var(--bois2); border-radius:8px; background:#fff; color:var(--encre); resize:vertical; tab-size:12; white-space:pre }

/* ---- pied : caisse, espace noir, tabouret ---- */
.yatai-footer { position:relative; width:min(100%, 760px); margin:0 auto; min-height:clamp(120px, 24vw, 180px); overflow:visible; background:var(--noir); display:flex; align-items:flex-start; justify-content:center }
.prop { position:absolute; top:0; height:clamp(80px, 20vw, 150px); width:auto; pointer-events:none } .prop.g { left:.2rem } .prop.d { right:.2rem }
.milieu { position:relative; text-align:center; padding:1.1rem 1rem; z-index:1; font-size:1rem; letter-spacing:.2em; font-weight:800 }
.milieu a { color:var(--or); text-decoration:none } .milieu a:hover { text-decoration:underline } .milieu .sep { color:rgba(255,246,226,.5); margin:0 .5rem; font-weight:400 }

@media (max-width:560px) { .yatai-footer { min-height:0; padding-top:5.6rem } .milieu { font-size:.9rem; letter-spacing:.14em } .prop { height:84px } .titre { font-size:1.55rem } .lanterne { width:40px; height:58px; font-size:.78rem } .app { padding:.6rem .5rem .8rem; border-width:5px } #mot { font-size:1.3rem } .yomi { font-size:1rem } .tambour { min-width:3.5rem; height:7rem } .face { height:3.2rem } .rouleau { padding:1.9rem 0 } .tambour::before { top:calc(50% - 1.6rem) } .tambour::after { top:calc(50% + 1.6rem) } .face .k { font-size:1.3rem } .prop { height:clamp(70px, 22vw, 110px) } }