/* 夜市人蔘 3-minute demo: a layer on top of game.css (the full game's own styles) */

/* demo chrome: no menu, no log, no deck piles or buying. Language, sound and rules stay. */
#b-log,#b-menu,#artnote,#decks,#mpbar{display:none!important}
#bar .rd b{font-size:11.5px;letter-spacing:.06em;color:var(--red)}
.mono{font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",var(--serif)}
.opp .mono{font-size:15px}
.popx{animation:bump .5s}

/* ---- coach: one tip, a ring around the thing to tap ---- */
#coach{position:fixed;left:0;top:0;z-index:97;max-width:min(300px,calc(100vw - 16px));background:#2b2219;color:#fbf3dc;border:1px solid #b99a58;border-radius:12px;
  padding:10px 13px;font-weight:700;font-size:15px;line-height:1.4;box-shadow:0 8px 24px rgba(30,18,6,.35);pointer-events:none;opacity:0;transform:translateY(6px);
  transition:opacity .2s,transform .2s;--ax:50%}
#coach.show{opacity:1;transform:none}
#coach:after{content:"";position:absolute;left:var(--ax);bottom:-8px;margin-left:-8px;border:8px solid transparent;border-bottom:0;border-top-color:#2b2219}
#coach.below:after{bottom:auto;top:-8px;border:8px solid transparent;border-top:0;border-bottom-color:#2b2219}
#coach .skip{pointer-events:auto;display:block;margin:8px 0 -2px auto;background:#4a3a28;border:1px solid #b99a58;border-radius:999px;color:#fbf3dc;font:inherit;font-size:13px;font-weight:700;padding:5px 12px;min-height:34px;cursor:pointer}
#coach .skip:active{background:#5c4832}
#banner .bx small{display:block;margin-top:6px;font-size:15px;font-weight:700;letter-spacing:.02em}
#coachring{position:fixed;left:0;top:0;width:0;height:0;z-index:96;border-radius:12px;pointer-events:none;opacity:0;transition:opacity .2s}
#coachring.show{opacity:1;box-shadow:0 0 0 3px #f2d58a,0 0 18px 6px rgba(242,213,138,.7);animation:cring 1.1s ease-in-out infinite}
#coachring.show.dim{box-shadow:0 0 0 3px #f2d58a,0 0 18px 6px rgba(242,213,138,.7),0 0 0 100vmax rgba(35,22,8,.34)}
@keyframes cring{50%{transform:scale(1.05)}}
.cglow{box-shadow:0 0 0 3px #f2d58a,0 0 16px 5px rgba(242,213,138,.85)!important;transform:translateY(-8px)!important;z-index:5}
@media (pointer:coarse){#coach .skip{min-height:40px;padding:6px 14px}}

/* ---- a phone on its side: the table needs the height, so ask for upright ---- */
#rotate{display:none}
@media (orientation:landscape) and (max-height:500px) and (pointer:coarse){
  #rotate{display:grid;position:fixed;inset:0;z-index:200;place-items:center;padding:24px;text-align:center;background:var(--paper);background-image:var(--noise);color:var(--ink)}
  #rotate p{margin:10px 0 0;font-size:19px;font-weight:800}
  #rotate .ph{display:inline-block;font-size:46px;line-height:1;animation:tilt 2s ease-in-out infinite;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",var(--serif)}
}
@keyframes tilt{0%,30%{transform:rotate(-90deg)}60%,100%{transform:rotate(0)}}

/* a cooked dish leaves the table at once (steam and coins mark the spot): while it faded it made a 4th dish that
   wrapped to a new row and pushed your cards down on every cook */
#table>.dish.out{display:none}

/* ---- big screens: a tablet at a fair (portrait) and large monitors get bigger cards instead of empty space ---- */
@media (min-width:700px) and (max-width:899px) and (min-height:1000px){
  :root{--cw:104px}
  #layout{max-width:820px}
  #table{grid-template-columns:repeat(var(--tn,3),minmax(0,200px))}
  #controls{max-width:820px}
}
@media (min-width:1500px) and (min-height:900px){
  :root{--cw:120px}
  #layout{max-width:1200px}
  #table{grid-template-columns:repeat(var(--tn,3),minmax(0,200px))}
  #bar{padding-left:max(10px,calc((100vw - 1200px)/2 + 18px));padding-right:max(10px,calc((100vw - 1200px)/2 + 18px))}
  #controls{max-width:1200px}
}

/* the win party falls behind the end screen, so its words and buttons stay readable */
.demo .conf{z-index:69}
body.ended #fx{z-index:69}

/* ---- juice ---- */
#fx{position:fixed;inset:0;pointer-events:none;z-index:94;overflow:hidden}
.fx{position:fixed;left:0;top:0;pointer-events:none;will-change:transform,opacity}
.fx svg{width:100%;height:100%;display:block}
.fx .emo{display:block;line-height:1;text-align:center;font-size:22px}
.fx .emo{font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",var(--serif)}
/* speech bubbles mix words and emoji. The emoji fonts are limited to emoji code points here: Apple Color Emoji also
   has a very wide space, which spread English/French bubbles out like "Uncle   can   cook   too!" on iPhone */
@font-face{font-family:"NM Emoji";src:local("Apple Color Emoji"),local("AppleColorEmoji"),local("Segoe UI Emoji"),local("SegoeUIEmoji"),local("Noto Color Emoji"),local("NotoColorEmoji");
  unicode-range:U+00A9,U+00AE,U+200D,U+203C,U+2049,U+2122,U+2139,U+2194-21AA,U+231A-23FF,U+24C2,U+25AA-25FE,U+2600-27BF,U+2934-2935,U+2B05-2B55,U+3030,U+303D,U+3297,U+3299,U+FE0F,U+1F000-1FAFF}
.say{font-family:"NM Emoji",var(--serif)}
.fx.big .emo{font-size:38px}
.fxt{transform:translate(-50%,-50%);font-weight:900;font-size:28px;color:#a8741a;white-space:nowrap;
  text-shadow:0 1px 0 #fff8e1,0 0 10px rgba(255,236,170,.95);animation:rise 1.3s ease-out forwards}
.fxt.sub{font-size:24px;color:#f1d48a;text-shadow:0 2px 8px rgba(0,0,0,.55);letter-spacing:.06em}
@keyframes rise{0%{opacity:0;transform:translate(-50%,-30%) scale(.6)}15%{opacity:1;transform:translate(-50%,-60%) scale(1.15)}100%{opacity:0;transform:translate(-50%,-190%) scale(1)}}
.steam{width:18px;height:18px;border-radius:50%;background:rgba(255,255,255,.9);filter:blur(3px);animation:steam 1.4s ease-out both}
@keyframes steam{0%{opacity:0;transform:translateY(0) scale(.4)}30%{opacity:.9}100%{opacity:0;transform:translateY(-70px) scale(1.7)}}
.flash{position:fixed;inset:0;z-index:89;background:radial-gradient(circle at 50% 34%,rgba(255,230,150,.92),rgba(255,230,150,0) 62%);animation:flash .85s ease-out forwards}
@keyframes flash{0%{opacity:0}15%{opacity:1}100%{opacity:0}}
.fx.gin{left:50%;top:34%;width:36px;height:36px;animation:burst 1.15s cubic-bezier(.2,.8,.3,1) both;z-index:91}
@keyframes burst{0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}20%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1.1) rotate(200deg)}}
.shake #layout{animation:shake .5s}
@keyframes shake{20%{transform:translate(-7px,2px)}40%{transform:translate(7px,-2px)}60%{transform:translate(-4px,1px)}80%{transform:translate(3px,-1px)}}
.spot{width:130px;height:130px;transform:translate(-50%,-50%);display:grid;place-items:center;border-radius:50%;
  background:radial-gradient(circle,rgba(255,226,140,.95),rgba(255,226,140,0) 70%);animation:spot 1.25s ease-out forwards}
.fx.spot .emo{font-size:58px}
@keyframes spot{0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}25%{opacity:1;transform:translate(-50%,-50%) scale(1.15)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.45)}}
.fx.lantern{top:auto;bottom:-70px;animation:lantern 5s ease-in both}
.fx.lantern .emo{font-size:40px}
@keyframes lantern{0%{opacity:0;transform:translateY(0)}10%{opacity:1}100%{opacity:0;transform:translateY(-115vh) rotate(10deg)}}
.say{position:fixed;z-index:69;max-width:min(240px,72vw);background:#fffdf5;color:var(--ink);border:1.5px solid var(--gold);border-radius:14px;padding:5px 11px;
  font-weight:800;font-size:13.5px;line-height:1.3;box-shadow:0 4px 12px rgba(60,40,10,.25);animation:sayin .25s cubic-bezier(.3,1.5,.5,1);pointer-events:none;--tx:50%;transition:opacity .3s,transform .3s}
.say:before{content:"";position:absolute;top:-8px;left:var(--tx);margin-left:-8px;border:8px solid transparent;border-top:0;border-bottom-color:var(--gold)}
.say.bye{opacity:0;transform:translateY(-6px)}
@keyframes sayin{0%{opacity:0;transform:scale(.6)}100%{opacity:1;transform:scale(1)}}

/* ---- end screen ---- */
.demoend .es{text-align:center;font-weight:800;font-size:17px;margin:4px 0 10px}
.demoend .edl .ol{text-align:center;font-size:13px;color:var(--mute);font-weight:700;margin-bottom:6px}
/* one row that scrolls sideways, so a long game's dishes never push the buttons off the screen; centred when they fit */
.demoend .eds{display:flex;gap:10px;overflow-x:auto;overscroll-behavior-x:contain;padding:2px 2px 6px;scrollbar-width:thin}
.demoend .eds>.ed:first-child{margin-left:auto}
.demoend .eds>.ed:last-child{margin-right:auto}
.demoend .ed{flex:0 0 66px;width:66px;border:0;background:none;padding:0;display:flex;flex-direction:column;gap:4px;align-items:center;font-family:var(--serif);color:var(--ink);min-height:0}
.demoend .ed .thumb{width:66px;display:block;transition:transform .15s}
.demoend .ed:active .thumb{transform:scale(.96)}
.demoend .ed .en{font-size:12px;font-weight:700;line-height:1.2}
.demoend .pitch{text-align:center;font-size:14.5px;color:var(--ink2);margin:12px 4px 4px;line-height:1.5}
.demoend .tnote{text-align:center;font-weight:800;color:var(--red);margin:6px 0}
.demoend .code{text-align:center;margin:8px 0;font-size:14px}
.demoend .code b{border:1px dashed var(--gold);border-radius:6px;padding:2px 10px;letter-spacing:.12em;background:#fffaf0}
.demoend .mbtns .btn.big{flex:1 1 100%;text-decoration:none;display:flex;align-items:center;justify-content:center}
.demoend .startfoot{margin-top:10px}
.demoend .credit{margin-top:8px}
.culture h2 small{display:block;font-size:14px;color:var(--ink2);font-weight:700;margin-top:2px}
.culture .roman{font-style:italic;color:var(--mute);font-size:13.5px;margin-bottom:6px}
/* pinyin with a third tone (dǐng, hǎi, shuǐ): Georgia has no ǎ ǐ ǒ ǔ and built them from a loose caron ("diˇng"),
   so on the Latin-font pages the pinyin line takes fonts that have them */
html:is([lang=en],[lang=fr],[lang=de]) .culture .roman{font-family:"Times New Roman","Noto Serif","Droid Serif",serif}
.culture .cs-body p{margin:6px 0;text-align:left}
.culture .where{font-weight:700;color:var(--ink)}

/* ---- ?debug=1 ---- */
#dbg{position:fixed;left:4px;bottom:calc(76px + var(--safeb));z-index:99;background:rgba(0,0,0,.74);color:#e4f3dc;font:10.5px/1.35 ui-monospace,Menlo,Consolas,monospace;
  padding:5px 7px;border-radius:6px;max-width:74vw;pointer-events:none;white-space:nowrap;overflow:hidden}

/* ---- language menu (the language button in the top bar) ---- */
#langmenu{position:fixed;z-index:120;display:flex;flex-direction:column;min-width:150px;padding:6px;background:var(--paper);border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 28px rgba(30,18,6,.28)}
#langmenu button{min-height:44px;padding:0 14px;border:0;border-radius:8px;background:none;font:inherit;font-weight:700;font-size:15px;color:var(--ink);text-align:left;cursor:pointer}
#langmenu button.on{background:var(--ink);color:var(--paper)}
#langmenu button:not(.on):hover{background:rgba(0,0,0,.06)}
#b-lang{font-size:12px;letter-spacing:.02em}
/* 简体中文: Simplified-Chinese fonts first, so the converted characters don't fall back to a mixed font */
html[lang=zh-Hans]{--serif:"Noto Serif SC","Source Han Serif SC","Songti SC","Noto Serif CJK SC","SimSun","Noto Serif TC",Georgia,"Times New Roman",serif}
#langmenu [lang=zh-Hans]{font-family:"Noto Serif SC","Source Han Serif SC","Songti SC","SimSun",serif}
/* English / Français / Deutsch: Latin serif fonts first. The Chinese-first stack drew Latin words with the phone's CJK font
   (Songti TC on iPhone, Noto Serif CJK on Android), whose wide spaces made sentences look gappy; Chinese names still fall through to it */
html[lang=en],html[lang=fr],html[lang=de]{--serif:Georgia,"Noto Serif","Droid Serif","Times New Roman","Noto Serif TC","Source Han Serif TC","Songti TC","Noto Serif CJK TC","PMingLiU",serif}
/* 日本語: Japanese Mincho fonts first, so kana and kanji come from one font and kanji take their Japanese shapes;
   a Traditional character in a dish name that the Japanese font lacks falls through to the TC fonts */
html[lang=ja]{--serif:"Hiragino Mincho ProN","Hiragino Mincho Pro","Yu Mincho","YuMincho","Noto Serif JP","Noto Serif CJK JP","Source Han Serif JP","BIZ UDPMincho","MS PMincho","Noto Serif TC","Songti TC","PMingLiU",Georgia,serif}
#langmenu [lang=ja]{font-family:"Hiragino Mincho ProN","Yu Mincho","YuMincho","Noto Serif JP","Noto Serif CJK JP","MS PMincho",serif}
/* Japanese wraps between any two letters, so かき玉スープ broke as かき玉スー/プ under its picture. There the names wrap only at
   the break points marked in culture.js (​); sentences wrap between phrases where the browser can (Chrome, Edge) */
html[lang=ja] .demoend .ed .en{word-break:keep-all;overflow-wrap:anywhere}
html[lang=ja] :is(#coach span,.demoend .es,.demoend .pitch,.cs-body p){word-break:auto-phrase}
/* German names are long compounds: under a picture they break at the soft hyphens marked in culture.js (Frühlings-|zwiebel),
   and a part that still does not fit breaks anywhere rather than spilling out */
html[lang=de] .demoend .ed .en{overflow-wrap:anywhere}