/* ═══════════════ NEKO RYOKAN — what is new on top of the konbini chrome ═══════════════
   base.css is NEKO KONBINI's warm-paper shell, shared on purpose: the two
   games are family. This file only adds what an inn needs.               */

:root{
  --ai:#2F4B7A;            /* indigo, the noren */
  --beni:#B8433A;          /* the lacquer red */
  --moss:#6E9254;
  --steam:#F4F7F6;
  --font-mincho:"Shippori Mincho","Zen Maru Gothic",serif;
}
html,body{background:#141A38}

/* ─────────── the staff, as faces ─────────── */
.crew{position:absolute;top:0;right:0;display:flex;flex-direction:column;flex-wrap:wrap-reverse;align-content:flex-start;gap:6px;
  max-height:calc(100vh - 150px);pointer-events:auto}
.crew-face{position:relative;width:46px;height:46px;border-radius:14px;border:2.5px solid var(--sumi);
  background:linear-gradient(#FFFDF7,#F0E2C9);box-shadow:0 3px 0 rgba(59,46,54,.22);cursor:pointer;padding:0;
  transition:transform .12s}
.crew-face canvas{width:40px;height:40px;display:block;margin:1px auto 0}
.crew-face:active{transform:translateY(2px)}
.crew-face.is-on{background:linear-gradient(#FFF1C4,#F3D48A);box-shadow:0 0 0 3px rgba(255,216,106,.55),0 3px 0 rgba(59,46,54,.22)}
.crew-face .st{position:absolute;left:-5px;bottom:-4px;font-size:9px;font-weight:800;line-height:1;
  background:var(--sumi);color:#FFF3DF;border-radius:7px;padding:2px 4px;letter-spacing:.4px;white-space:nowrap}
.crew-face .st.rest{background:var(--moss)}
.crew-face .st.hurry{background:var(--beni)}
.crew-face .lv{position:absolute;right:-5px;top:-5px;min-width:15px;height:15px;border-radius:8px;
  background:var(--paper);border:2px solid var(--sumi);font-size:8.5px;font-weight:900;line-height:11px;text-align:center}
@media (max-width:520px){
  .crew{flex-direction:row;flex-wrap:wrap;max-height:none;top:auto;position:relative;margin-top:7px;justify-content:flex-start}
  .crew-face{width:38px;height:38px;border-radius:11px}
  .crew-face canvas{width:32px;height:32px}
}

/* ─────────── a staff member waiting to be told ─────────── */
.pick{position:absolute;left:50%;transform:translateX(-50%);top:calc(var(--safe-t) + 64px);z-index:24;
  display:flex;align-items:center;gap:10px;background:linear-gradient(#FFF6DA,#F6DFA0);
  border:2.5px solid var(--sumi);border-radius:14px;padding:6px 8px 6px 6px;box-shadow:var(--shadow);
  animation:phaseflip .25s ease;max-width:min(94vw,440px)}
.pick-face{width:40px;height:40px;border-radius:10px;background:var(--kinari-2)}
.pick-txt{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.pick-txt b{font-size:14px;font-weight:800}
.pick-txt span{font-size:11px;opacity:.7}
.pick-x{border:2px solid var(--sumi);background:var(--paper);border-radius:9px;width:30px;height:30px;
  font-weight:800;cursor:pointer;flex:0 0 auto}

/* ─────────── somebody talking to you ─────────── */
.talk{position:absolute;left:0;right:0;bottom:calc(84px + var(--safe-b));z-index:42;display:flex;justify-content:center;
  padding:0 10px;pointer-events:none}
.talk-box{pointer-events:auto;position:relative;display:flex;gap:12px;align-items:flex-end;width:min(96vw,640px);
  background:linear-gradient(#FFFCF4,#F4E8D2);border:3px solid var(--sumi);border-radius:18px;
  padding:10px 14px 12px 10px;box-shadow:0 8px 0 rgba(59,46,54,.2),0 20px 50px rgba(0,0,0,.4);
  animation:talkin .32s cubic-bezier(.2,1.3,.4,1)}
@keyframes talkin{from{transform:translateY(24px) scale(.96);opacity:0}}
.talk-box::before{content:"";position:absolute;inset:5px;border:1.5px solid rgba(59,46,54,.18);border-radius:13px;pointer-events:none}
.talk-face{flex:0 0 auto;width:112px;height:112px;border-radius:14px;background:radial-gradient(circle at 50% 70%,#FBF1DC,#E6D3B0);
  border:2.5px solid var(--sumi);margin-top:-34px;box-shadow:0 4px 0 rgba(59,46,54,.2)}
.talk-body{flex:1;min-width:0;padding-bottom:2px}
.talk-name{display:flex;align-items:baseline;gap:8px;margin-bottom:4px}
.talk-name b{font-family:var(--font-mincho);font-size:18px;font-weight:800;letter-spacing:2px}
.talk-name span{font-size:10.5px;letter-spacing:1px;opacity:.55;font-weight:800;text-transform:uppercase}
.talk-text{margin:0 0 8px;font-size:14.5px;line-height:1.55;font-weight:700;min-height:44px}
.talk-text .jp{display:block;font-family:var(--font-jp);font-size:12px;opacity:.55;font-weight:700;margin-top:2px}
.talk-choices{display:flex;flex-wrap:wrap;gap:7px}
.talk-choices button{border:2.5px solid var(--sumi);border-radius:11px;background:var(--paper);font-family:var(--font);
  font-weight:800;font-size:12.5px;padding:7px 12px;cursor:pointer;box-shadow:0 3px 0 rgba(59,46,54,.2)}
.talk-choices button:first-child{background:linear-gradient(#FFE9AE,#F0C468)}
.talk-choices button:active{transform:translateY(2px);box-shadow:none}
.talk-x{position:absolute;right:-8px;top:-12px;width:30px;height:30px;border-radius:50%;border:2.5px solid var(--sumi);
  background:var(--paper);font-weight:800;cursor:pointer}
@media (max-width:520px){
  .talk-face{width:78px;height:78px;margin-top:-22px}
  .talk-text{font-size:13px}
  .talk-name b{font-size:15px}
}

/* ─────────── the reservation book ─────────── */
.res{position:relative;display:flex;gap:12px;background:var(--paper);border:2.5px solid var(--sumi);border-radius:16px;
  padding:10px 12px;margin-bottom:10px;box-shadow:0 4px 0 rgba(59,46,54,.15)}
.res.special{background:linear-gradient(135deg,#FFFBEE,#F8E9C4);border-color:#8A6A2A}
.res.legend{background:linear-gradient(135deg,#FBF6FF,#E9DDF6);border-color:#5A4A7A}
.res.taken{opacity:.62}
.res canvas{flex:0 0 auto;width:92px;height:92px;border-radius:12px;background:radial-gradient(circle at 50% 70%,#FBF1DC,#E6D3B0);border:2px solid rgba(59,46,54,.35)}
.res-mid{flex:1;min-width:0}
.res-nm{font-family:var(--font-mincho);font-size:17px;font-weight:800;letter-spacing:1px;line-height:1.15}
.res-nm .jp{font-family:var(--font-jp);font-size:12px;opacity:.55;margin-left:6px;letter-spacing:0}
.res-lines{margin:4px 0 6px;font-size:12px;line-height:1.45;opacity:.85}
.res-lines div::before{content:"・";opacity:.5}
.res-likes{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:6px}
.res-likes i{font-style:normal;font-size:10.5px;font-weight:800;border-radius:7px;padding:2px 6px;background:rgba(59,46,54,.08)}
.res-likes i.love{background:#FBE0E4;color:#A83A4E}
.res-likes i.hate{background:#E6E6EE;color:#5A5A7A}
.res-likes i.q{opacity:.55}
.res-foot{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.res-foot .when{font-size:11px;font-weight:800;opacity:.6;letter-spacing:.5px}
.res-foot button{margin-left:auto}
.res .ribbon{position:absolute;top:-9px;left:14px;background:var(--beni);color:#FFF3DF;font-size:9.5px;font-weight:800;
  letter-spacing:1.2px;border-radius:7px;padding:2px 8px}
.res.special .ribbon{background:#8A6A2A}
.res .accepted{position:absolute;right:12px;top:10px;width:46px;height:46px;border-radius:50%;border:3px solid var(--beni);
  color:var(--beni);display:grid;place-items:center;font-family:var(--font-jp);font-weight:900;font-size:15px;transform:rotate(-12deg)}
@media (max-width:420px){ .res canvas{width:68px;height:68px} }

.letter{background:linear-gradient(#FFFDF6,#F6EEDC);border:2.5px solid var(--sumi);border-radius:6px;padding:14px 16px;margin-bottom:10px;
  font-family:var(--font-mincho);font-size:14px;line-height:1.8;box-shadow:0 4px 0 rgba(59,46,54,.12);position:relative}
.letter .from{display:block;text-align:right;font-size:12px;opacity:.65;margin-top:6px}
.letter .seal{position:absolute;right:12px;bottom:-10px;width:34px;height:34px;border-radius:50%;background:var(--beni);
  color:#FFF3DF;display:grid;place-items:center;font-size:13px;font-weight:800;transform:rotate(-8deg)}

.note{background:var(--paper);border:2px solid rgba(59,46,54,.3);border-radius:12px;padding:9px 11px;margin-bottom:8px}
.note .stars{color:#E9A21E;font-weight:800;font-size:13px;letter-spacing:1px}
.note .who{all:unset;font-size:11px;font-weight:800;opacity:.55;margin-left:6px}
.note p{margin:3px 0 0;font-size:12.5px;line-height:1.5;font-family:var(--font-mincho)}

.guest{display:flex;gap:11px;background:var(--paper);border:2.5px solid var(--sumi);border-radius:14px;padding:9px 11px;margin-bottom:9px;box-shadow:0 3px 0 rgba(59,46,54,.14)}
.guest.unknown{opacity:.5}
.guest canvas{flex:0 0 auto;width:70px;height:70px;border-radius:11px;background:radial-gradient(circle at 50% 70%,#FBF1DC,#E6D3B0)}
.guest .gn{font-family:var(--font-mincho);font-weight:800;font-size:15px}
.guest .gd{font-size:11.5px;opacity:.7;line-height:1.45;margin-top:2px}
.guest .gv{font-size:10px;font-weight:800;letter-spacing:.6px;opacity:.55;margin-top:4px}
.hearts{color:#D2556A;letter-spacing:1px;font-size:11px}

.dish{display:flex;gap:10px;align-items:center;background:var(--paper);border:2px solid rgba(59,46,54,.3);border-radius:12px;padding:7px 10px;margin-bottom:7px}
.dish canvas{flex:0 0 auto;width:64px;height:44px;border-radius:9px;background:#EFE4CE}
.dish.unknown{opacity:.45}
.dish b{font-size:13.5px}
.dish .jp{font-family:var(--font-jp);font-size:11px;opacity:.55;margin-left:5px}
.dish .how{font-size:11px;opacity:.65;margin-top:1px;line-height:1.4}

.mem{display:inline-flex;flex-direction:column;align-items:center;width:31%;min-width:92px;margin:0 1% 10px;vertical-align:top}
.mem canvas{width:84px;height:84px;border-radius:12px;background:#EFE4CE;border:2px solid rgba(59,46,54,.25)}
.mem b{font-size:11.5px;text-align:center;margin-top:4px;line-height:1.25}
.mem span{font-size:10px;opacity:.6;text-align:center}

/* build and staff cards borrow .card from base.css */
.card .req{color:#9A6A2A;font-weight:800}
.card .own{color:#2A6B41;font-weight:800}
.qbtn.hire{background:linear-gradient(#FFE0B8,#F4B77A)}

/* ─────────── the morning journal ─────────── */
#screenJournal{background:rgba(16,12,22,.78);display:none;place-items:center}
#screenJournal.is-active{display:grid}
.journal{background:linear-gradient(#FFFCF4,#F3E8D2)}
.journal .jsect{font-family:var(--font-jp);font-weight:700;font-size:12px;letter-spacing:2px;opacity:.55;margin:12px 0 6px;display:flex;gap:8px;align-items:center}
.journal .jsect:after{content:"";flex:1;height:2px;background:rgba(59,46,54,.15)}
.journal .jstay{display:flex;justify-content:space-between;gap:8px;font-size:12.5px;font-weight:700;margin:4px 0}
.journal .jstay .s{color:#E9A21E;white-space:nowrap}
.journal .jquote{font-family:var(--font-mincho);font-size:12.5px;line-height:1.55;opacity:.8;margin:0 0 8px 10px;border-left:3px solid rgba(59,46,54,.15);padding-left:8px}
.journal .jnew{background:rgba(233,184,75,.18);border-radius:10px;padding:7px 10px;font-size:12.5px;font-weight:700;margin:5px 0;line-height:1.45}

/* ─────────── title ─────────── */
.title-logo .l1{font-family:var(--font-mincho);letter-spacing:10px;font-size:clamp(46px,12vw,82px);font-weight:800;
  color:#FFF3DF;text-shadow:0 0 30px rgba(255,190,120,.45),0 5px 0 #6A2A26,0 10px 28px rgba(0,0,0,.6)}
.title-logo .l2{font-family:var(--font);letter-spacing:12px;font-size:clamp(14px,3.6vw,20px);font-weight:800;color:#FFC98A;
  margin-top:10px;text-shadow:0 2px 12px rgba(0,0,0,.6)}

/* the rating, explained */
.rate-card{background:var(--kinari);border:3px solid var(--sumi);border-radius:20px;padding:16px 18px;width:min(92vw,400px);
  color:var(--sumi);box-shadow:0 20px 60px rgba(0,0,0,.5)}
.rate-card h3{margin:0 0 6px;font-family:var(--font-jp);letter-spacing:2px}
.rate-card p{font-size:12.5px;line-height:1.6;opacity:.8;margin:0 0 8px}
.rate-card .note p{font-size:12px}
.rate-card button{margin-top:8px;border:2.5px solid var(--sumi);background:var(--paper);border-radius:11px;padding:7px 16px;font-weight:800;cursor:pointer;font-family:var(--font)}