:root {
  --fs: 1;
  --ink: #5a4636;
  --cream: #fff8e8;
  --pink: #ff8fa3;
  --green: #6cc455;
  --blue: #5ec0ec;
  --yellow: #ffd84d;
  font-size: calc(18px * var(--fs));
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #bfe8ff; color: var(--ink);
  font-family: "Hiragino Maru Gothic ProN", "Yu Gothic", "Meiryo", "Noto Sans JP", sans-serif; font-weight: 700;
  touch-action: none; user-select: none; -webkit-user-select: none; }
#c { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.hidden { display: none !important; }
button { font: inherit; color: var(--ink); cursor: pointer; border: 0; }
input { font: inherit; color: var(--ink); user-select: text; -webkit-user-select: text; }

/* 画面 */
.screen { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; padding: 1rem; z-index: 20; }
#title { justify-content: space-between; padding: 8vh 1rem 5vh; background: linear-gradient(#ffffff55, #ffffff00 40%, #ffffff00 60%, #ffffff66); }
.logo { text-align: center; }
.logo-sub { display: inline-block; background: var(--pink); color: #fff; padding: .25rem 1rem; border-radius: 99px; font-size: .95rem; letter-spacing: .1em; }
h1 { margin: .4rem 0 0; font-size: 2.8rem; line-height: 1.15; color: #fff; text-shadow: 0 3px 0 #e0709a, 0 0 18px #ff8fa3, 3px 3px 0 #e0709a, -3px 3px 0 #e0709a; letter-spacing: .06em; }
.menu-col { display: flex; flex-direction: column; gap: .9rem; width: min(88vw, 420px); }
.fine { text-align: center; font-size: .8rem; background: #ffffffbb; padding: .4rem .8rem; border-radius: 12px; margin: 0; }
.fine2 { text-align: center; font-size: .8rem; margin: 0; }

.big { width: 100%; min-height: 3.4rem; padding: .7rem 1rem; border-radius: 1.2rem; background: #fff; font-size: 1.15rem;
  box-shadow: 0 4px 0 #d9c9a8, 0 6px 12px #0002; border: 3px solid #f0e2c0; }
.big.primary { background: var(--green); color: #fff; border-color: #4ea83c; box-shadow: 0 4px 0 #3e8c30, 0 6px 12px #0002; text-shadow: 0 1px 0 #3e8c30; }
.big.danger { background: #fff0f0; border-color: #ffc4c4; color: #c0405a; }
.big:active, .hud-btn:active, .round:active, .talk:active, .send:active { transform: translateY(2px); }

/* アバター作成 */
.sheet { justify-content: flex-end; background: none; pointer-events: none; padding-bottom: calc(env(safe-area-inset-bottom) + .6rem); }
.sheet > * { pointer-events: auto; }
#creator { gap: .5rem; }
#creator h2, #creator .field, #creator .row, #creator .big { width: min(94vw, 520px); }
#creator { background: none; }
#creator > * { position: relative; }
#creator::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 56%; background: #fff8e8ee; border-radius: 1.6rem 1.6rem 0 0; box-shadow: 0 -6px 20px #0003; pointer-events: none; }
h2 { margin: 0; font-size: 1.25rem; text-align: center; }
.field { display: flex; align-items: center; gap: .6rem; font-size: 1rem; }
.field input { flex: 1; min-width: 0; font-size: 1.1rem; padding: .5rem .8rem; border: 3px solid #f0d9a8; border-radius: 1rem; background: #fff; }
.row { display: flex; align-items: center; gap: .5rem; }
.lbl { width: 5.2rem; font-size: .85rem; flex: none; }
.opts { display: flex; flex-wrap: wrap; gap: .4rem; flex: 1; }
.opts button { padding: .2rem .55rem; border-radius: 99px; background: #fff; border: 3px solid #f0d9a8; font-size: .85rem; min-height: 2.2rem; }
.opts button.on { background: var(--yellow); border-color: #e8a800; }
.opts.sw button { width: 2.1rem; height: 2.1rem; min-height: 0; padding: 0; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 2px #d9c9a8; }
.opts.sw button.on { box-shadow: 0 0 0 4px #e8455a; transform: scale(1.1); }

/* HUD */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
#hud > * { pointer-events: auto; }
.hud-btn { background: #fffffff0; border-radius: 99px; padding: .5rem 1rem; font-size: .95rem; min-height: 2.8rem; box-shadow: 0 3px 0 #d9c9a8, 0 4px 8px #0002; border: 3px solid #f0e2c0; }
#btnMenu { position: absolute; top: calc(env(safe-area-inset-top) + .6rem); left: .6rem; }
#stat { position: absolute; top: calc(env(safe-area-inset-top) + .6rem); right: .6rem; display: flex; gap: .4rem; pointer-events: none; }
#stat span { background: #fffffff0; padding: .5rem .8rem; border-radius: 99px; font-size: .95rem; border: 3px solid #f0e2c0; }
#hint { position: absolute; top: calc(env(safe-area-inset-top) + 4.2rem); left: 50%; transform: translateX(-50%); width: max-content; max-width: 92vw; background: #ffffffdd; padding: .4rem .9rem; border-radius: 99px; font-size: .85rem; text-align: center; pointer-events: none; transition: opacity 1s; }
#hint.fade { opacity: 0; }
#joy { position: absolute; left: calc(env(safe-area-inset-left) + 1.2rem); bottom: calc(env(safe-area-inset-bottom) + 1.4rem); width: 9rem; height: 9rem; border-radius: 50%; background: #ffffff66; border: 4px solid #ffffffcc; touch-action: none; }
#joyKnob { position: absolute; left: 50%; top: 50%; width: 4rem; height: 4rem; margin: -2rem 0 0 -2rem; border-radius: 50%; background: #fffffff2; border: 4px solid var(--pink); box-shadow: 0 3px 8px #0003; }
#rotBtns { position: absolute; right: .8rem; bottom: calc(env(safe-area-inset-bottom) + 1.4rem); display: flex; gap: .6rem; }
.round { width: 3.6rem; height: 3.6rem; border-radius: 50%; background: #fffffff0; font-size: 1.3rem; border: 3px solid #f0e2c0; box-shadow: 0 3px 0 #d9c9a8; }
.talk { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(env(safe-area-inset-bottom) + 11.8rem); width: max-content; max-width: 92vw; min-height: 4rem; padding: .6rem 1.2rem; border-radius: 99px; background: var(--pink); color: #fff; font-size: 1.25rem; border: 4px solid #fff; box-shadow: 0 5px 0 #d86a82, 0 8px 14px #0003; animation: pulse 1.2s infinite; text-shadow: 0 1px 0 #d86a82; }
@keyframes pulse { 50% { transform: translateX(-50%) scale(1.05); } }
.talk.wake { background: var(--yellow); color: var(--ink); border-color: #fff; box-shadow: 0 5px 0 #d9a800, 0 8px 14px #0003; text-shadow: none; }
#toast { position: fixed; top: 22%; left: 50%; transform: translateX(-50%); z-index: 50; background: #fffffff2; border: 4px solid var(--yellow); padding: .8rem 1.2rem; border-radius: 1.4rem; text-align: center; max-width: 90vw; font-size: 1.05rem; box-shadow: 0 6px 16px #0003; animation: pop .35s; pointer-events: none; }
@keyframes pop { from { transform: translateX(-50%) scale(.7); opacity: 0; } }

/* チャット */
#chat { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; height: min(62vh, 560px); height: min(62dvh, 560px); background: #fff8e8; border-radius: 1.6rem 1.6rem 0 0; box-shadow: 0 -8px 24px #0004; display: flex; flex-direction: column; padding-bottom: env(safe-area-inset-bottom); max-width: 760px; margin: 0 auto; touch-action: pan-y; }
#chat header { display: flex; align-items: center; gap: .7rem; padding: .6rem .8rem; border-bottom: 3px dashed #f0d9a8; }
#chatFace { width: 3.4rem; height: 3.4rem; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 3px var(--c, #f0d9a8); background: #dff4ff; flex: none; }
.who { flex: 1; display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.who b { font-size: 1.15rem; }
.who small { font-size: .75rem; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#chatHearts { color: #ff5c7a; font-size: .95rem; letter-spacing: .1em; }
.close { background: #fff; border: 3px solid #f0d9a8; border-radius: 99px; padding: .4rem .8rem; font-size: .9rem; min-height: 2.6rem; }
#chatLog { flex: 1; overflow-y: auto; padding: .7rem .8rem; display: flex; flex-direction: column; gap: .6rem; touch-action: pan-y; -webkit-overflow-scrolling: touch; user-select: text; -webkit-user-select: text; }
.msg { max-width: 82%; padding: .6rem .9rem; border-radius: 1.2rem; font-size: 1.05rem; line-height: 1.55; animation: pop2 .25s; word-break: break-all; }
@keyframes pop2 { from { transform: translateY(8px); opacity: 0; } }
.msg.npc { align-self: flex-start; background: #fff; border: 3px solid var(--c, #f0d9a8); border-bottom-left-radius: .3rem; }
.msg.me { align-self: flex-end; background: var(--green); color: #fff; border-bottom-right-radius: .3rem; text-shadow: 0 1px 0 #3e8c30; }
.msg.sys { align-self: center; background: #ffe9a8; font-size: .85rem; border-radius: 99px; }
.msg.typing { opacity: .7; letter-spacing: .3em; }
#chips { display: flex; gap: .45rem; overflow-x: auto; padding: .45rem .8rem; touch-action: pan-x; scrollbar-width: none; }
#chips::-webkit-scrollbar { display: none; }
#chips button { flex: none; background: #fff; border: 3px solid var(--blue); border-radius: 99px; padding: .45rem .9rem; font-size: 1rem; min-height: 2.8rem; box-shadow: 0 3px 0 #9ad3ec; white-space: nowrap; }
.inputRow { display: flex; gap: .5rem; padding: .3rem .8rem .7rem; }
.inputRow input { flex: 1; min-width: 0; font-size: 1.05rem; padding: .6rem .9rem; border: 3px solid #f0d9a8; border-radius: 1.1rem; background: #fff; }
.send { background: var(--green); color: #fff; padding: 0 1rem; border-radius: 1.1rem; font-size: 1.05rem; border: 3px solid #4ea83c; min-width: 4.8rem; text-shadow: 0 1px 0 #3e8c30; }
.gift { background: #fff; border: 3px solid var(--pink); border-radius: 1.1rem; width: 3.4rem; font-size: 1.3rem; }
.gift:disabled { opacity: .4; }

/* モーダル */
.modal { background: #0000004d; }
.panel { background: #fff8e8; border-radius: 1.6rem; padding: 1.1rem; width: min(92vw, 480px); max-height: 92vh; max-height: 92dvh; overflow-y: auto; display: flex; flex-direction: column; gap: .7rem; box-shadow: 0 10px 30px #0005; border: 4px solid #fff; touch-action: pan-y; }
.set { display: flex; flex-direction: column; gap: .3rem; }
.seg { display: flex; flex-wrap: wrap; gap: .4rem; }
.seg button { flex: 1 1 auto; white-space: nowrap; padding: .5rem .7rem; min-height: 2.9rem; border-radius: 1rem; background: #fff; border: 3px solid #f0d9a8; font-size: .95rem; }
.seg button.on { background: var(--yellow); border-color: #e8a800; }
#nbList { display: flex; flex-direction: column; gap: .5rem; }
.nb { display: flex; align-items: center; gap: .6rem; background: #fff; border-radius: 1.1rem; padding: .4rem .6rem; border: 3px solid #f0e2c0; }
.nb img { width: 3rem; height: 3rem; border-radius: 50%; background: #dff4ff; flex: none; }
.nb div { flex: 1; min-width: 0; line-height: 1.3; }
.nb small { display: block; font-size: .7rem; opacity: .8; }
.nb .h { color: #ff5c7a; font-size: .85rem; letter-spacing: .08em; }
.th { display: flex; align-items: center; gap: .7rem; width: 100%; text-align: left; background: #fff; border: 3px solid #f0e2c0; border-radius: 1.2rem; padding: .6rem .8rem; box-shadow: 0 3px 0 #e0d0aa; }
.th span.e { font-size: 1.8rem; }
.th small { display: block; font-size: .72rem; opacity: .85; font-weight: 600; }
.th .new { background: #ff5c7a; color: #fff; border-radius: 99px; padding: 0 .5rem; font-size: .7rem; margin-left: .3rem; }
#thList { display: flex; flex-direction: column; gap: .5rem; }

/* シアター */
#theaterUI { position: fixed; inset: 0; z-index: 25; pointer-events: none; }
#theaterUI > * { pointer-events: auto; }
#subtitle { position: absolute; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 1.6rem); transform: translateX(-50%); width: min(94vw, 720px); min-height: 4.6rem; background: #fffffff0; border: 4px solid var(--yellow); border-radius: 1.4rem; padding: .7rem 1rem; font-size: 1.15rem; line-height: 1.55; box-shadow: 0 6px 16px #0003; }
#subtitle b { display: block; font-size: .85rem; color: var(--pink); margin-bottom: .1rem; }
#subtitle:empty, #subtitle.off { opacity: 0; }
.th-bar { position: absolute; top: calc(env(safe-area-inset-top) + .6rem); left: .6rem; right: .6rem; display: flex; justify-content: space-between; }
#thEnd { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: #0000004d; }

@media (max-height: 520px) and (orientation: landscape) {
  :root { font-size: calc(15px * var(--fs)); }
  #chat { left: auto; right: 0; top: 0; height: 100dvh; width: min(54vw, 520px); border-radius: 1.6rem 0 0 1.6rem; max-width: none; margin: 0; }
  #joy { width: 7rem; height: 7rem; }
  h1 { font-size: 2rem; }
  #title { padding: 3vh 1rem; flex-direction: row; justify-content: space-around; }
  #hint { display: none; }
  .talk { left: auto; right: .8rem; transform: none; bottom: calc(env(safe-area-inset-bottom) + 5.6rem); animation: none; }
  #shop { left: auto; right: 0; top: 0; height: 100dvh; width: min(54vw, 520px); border-radius: 1.6rem 0 0 1.6rem; max-width: none; margin: 0; }
  #creator { position: fixed; inset: 0 0 0 auto; width: min(54vw, 520px); justify-content: flex-start; overflow-y: auto; background: #fff8e8; border-radius: 1.6rem 0 0 1.6rem; padding-top: .8rem; pointer-events: auto; }
  #creator::before { display: none; }
  #creator h2, #creator .field, #creator .row, #creator .big { width: 100%; }
}

#creator h2 { background: #fffffff0; padding: .3rem 1rem; border-radius: 99px; width: auto; align-self: center; }

/* おみせ */
#shop { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; height: min(56vh, 540px); height: min(56dvh, 540px); max-width: 760px; margin: 0 auto; background: #fff8e8; border-radius: 1.6rem 1.6rem 0 0; box-shadow: 0 -8px 24px #0004; display: flex; flex-direction: column; gap: .5rem; padding: .7rem .8rem calc(env(safe-area-inset-bottom) + .7rem); touch-action: pan-y; }
#shop header { display: flex; justify-content: space-between; align-items: center; }
#shop header span { background: #fff; border: 3px solid #f0e2c0; border-radius: 99px; padding: .2rem .8rem; font-size: 1rem; }
.tabs { display: flex; gap: .5rem; }
.tabs button { flex: 1; min-height: 2.9rem; border-radius: 1rem; background: #fff; border: 3px solid #f0d9a8; font-size: 1rem; }
.tabs button.on { background: var(--yellow); border-color: #e8a800; }
#shopMsg { background: #ffe9a8; border-radius: 1rem; padding: .35rem .8rem; font-size: .9rem; text-align: center; }
#shopList { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: .45rem; -webkit-overflow-scrolling: touch; }
.item { display: flex; align-items: center; gap: .6rem; background: #fff; border: 3px solid #f0e2c0; border-radius: 1.1rem; padding: .35rem .5rem .35rem .7rem; }
.item .e { font-size: 1.6rem; }
.item .n { flex: 1; min-width: 0; line-height: 1.25; font-size: .95rem; }
.item .n small { display: block; opacity: .75; font-size: .75rem; }
.item button { min-height: 2.9rem; min-width: 5.6rem; border-radius: 1rem; background: var(--green); color: #fff; border: 3px solid #4ea83c; font-size: .95rem; text-shadow: 0 1px 0 #3e8c30; }
.item button.on { background: #ffd84d; color: var(--ink); border-color: #e8a800; text-shadow: none; }
.item button.dis { background: #ddd; border-color: #bbb; color: #888; text-shadow: none; }
@media (max-height: 520px) and (orientation: landscape) {
  #shop { left: auto; right: 0; top: 0; bottom: 0; height: 100dvh; width: min(54vw, 520px); border-radius: 1.6rem 0 0 1.6rem; max-width: none; margin: 0; }
}

.talk.enter { bottom: calc(env(safe-area-inset-bottom) + 16.8rem); background: #4f9fe0; box-shadow: 0 5px 0 #3478b8, 0 8px 14px #0003; text-shadow: 0 1px 0 #3478b8; animation: none; }
#shop header { gap: .5rem; }
#shopFace { width: 3rem; height: 3rem; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 3px #a8704a; background: #dff4ff; flex: none; }
#shop header h2 { flex: 1; text-align: left; }
@media (max-height: 520px) and (orientation: landscape) { .talk.enter { bottom: calc(env(safe-area-inset-bottom) + 10.4rem); } }

.round.snd { position: absolute; left: .8rem; bottom: calc(env(safe-area-inset-bottom) + 11.2rem); width: 3.2rem; height: 3.2rem; font-size: 1.2rem; }
@media (max-height: 520px) and (orientation: landscape) { .round.snd { bottom: calc(env(safe-area-inset-bottom) + 9rem); } }

#questBar { position: absolute; top: calc(env(safe-area-inset-top) + 4.0rem); left: .6rem; right: .6rem; background: #fff3c8f0; border: 3px solid var(--yellow); border-radius: 1.2rem; padding: .35rem .8rem; font-size: .9rem; text-align: center; box-shadow: 0 3px 8px #0002; }
#hint { top: calc(env(safe-area-inset-top) + 7.4rem) !important; }
.msg.choice { align-self: stretch; display: flex; gap: .6rem; background: none; padding: 0; }
.msg.choice button { flex: 1; min-height: 3.2rem; border-radius: 1.1rem; font-size: 1.05rem; border: 3px solid #f0d9a8; background: #fff; }
.msg.choice button.ok { background: var(--green); color: #fff; border-color: #4ea83c; text-shadow: 0 1px 0 #3e8c30; }
.msg.choice button:disabled { opacity: .5; }
.qinv { background: #fff; border: 3px solid #f0e2c0; border-radius: 1rem; padding: .4rem .7rem; font-size: .95rem; text-align: center; }
#qList h3 { margin: .6rem 0 .3rem; font-size: 1rem; }
.qcard { display: flex; gap: .6rem; align-items: center; background: #fff; border: 3px solid #f0e2c0; border-radius: 1.1rem; padding: .4rem .6rem; margin-bottom: .4rem; }
.qcard img { width: 2.8rem; height: 2.8rem; border-radius: 50%; background: #dff4ff; flex: none; }
.qcard b { display: block; font-size: .98rem; }
.qcard small { display: block; font-size: .72rem; opacity: .75; }
.qcard p { margin: .15rem 0 0; font-size: .82rem; font-weight: 600; line-height: 1.35; }
.qcard .pg { font-weight: 800; color: #3e8c30; }
.qcard.ready { border-color: #3dbb6a; background: #effff3; }
.qcard.avail { border-color: #ff8a3d; background: #fff6ee; }
.qcard.done { opacity: .6; }
#mapCv { width: 100%; max-width: 360px; align-self: center; border-radius: 1rem; border: 3px solid #f0e2c0; background: #7fc8f0; aspect-ratio: 1; }
@media (max-height: 520px) and (orientation: landscape) { #questBar { right: auto; max-width: 52vw; } }

#giftPick { display: flex; flex-wrap: wrap; gap: .4rem; padding: .4rem .8rem; background: #fff3e0; border-top: 3px dashed #f0d9a8; }
#giftPick { flex: 0 1 auto; max-height: 42%; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; min-height: 0; }
#giftPick.hidden { display: none; }
#giftPick .gp-t { width: 100%; font-size: .85rem; }
#giftPick button { background: #fff; border: 3px solid var(--pink); border-radius: 1rem; padding: .35rem .8rem; font-size: .95rem; min-height: 2.8rem; }
#giftPick button small { opacity: .7; }
.item .btns { display: flex; flex-direction: column; gap: .3rem; }
.item .btns button { min-height: 2.5rem; min-width: 6rem; font-size: .88rem; }
.item button.alt { background: #fff; color: var(--ink); border-color: #f0b3c0; text-shadow: none; }
.qcard.lock { opacity: .75; border-style: dashed; }
#diaryList h3 { margin: .7rem 0 .2rem; font-size: 1rem; }
.dline { margin: .1rem 0; font-size: .92rem; line-height: 1.5; font-weight: 600; }
#dailyBody p { margin: .4rem 0; line-height: 1.6; }
#dailyBody .dt { font-size: 1.1rem; }
#dailyBody .tip { background: #ffe9a8; border-radius: 1rem; padding: .5rem .8rem; font-size: .9rem; }

.talk.fishbtn { bottom: calc(env(safe-area-inset-bottom) + 16.8rem); background: #2fa8c8; box-shadow: 0 5px 0 #1f7f9a, 0 8px 14px #0003; text-shadow: 0 1px 0 #1f7f9a; animation: none; }
@media (max-height: 520px) and (orientation: landscape) { .talk.fishbtn { bottom: calc(env(safe-area-inset-bottom) + 10.4rem); } }
#fishUI { position: fixed; inset: 0; z-index: 12; pointer-events: none; }
#fishUI > * { pointer-events: auto; }
#fishMsg { position: absolute; top: calc(env(safe-area-inset-top) + 1rem); left: 50%; transform: translateX(-50%); width: max-content; max-width: 92vw; background: #fffffff0; border: 3px solid #bfe8ff; border-radius: 1.2rem; padding: .6rem 1.1rem; font-size: 1.05rem; text-align: center; box-shadow: 0 4px 10px #0002; }
.reel { position: absolute; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 9rem); transform: translateX(-50%); min-width: 16rem; min-height: 5rem; border-radius: 99px; background: #ff8a3d; color: #fff; font-size: 1.4rem; border: 5px solid #fff; box-shadow: 0 6px 0 #d96a1d, 0 10px 18px #0004; animation: reelp .5s infinite; text-shadow: 0 1px 0 #d96a1d; }
@keyframes reelp { 50% { transform: translateX(-50%) scale(1.08); } }
.fq { position: absolute; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 2rem); transform: translateX(-50%); }
.cc { text-align: center; }
.cc-e { font-size: 5rem; line-height: 1.1; }
.cc h3 { margin: .2rem 0; font-size: 1.3rem; }
.cc p { margin: .3rem 0; line-height: 1.5; }
.cc-s { font-size: .9rem; opacity: .85; }
.cc .new { background: #ff5c7a; color: #fff; border-radius: 99px; padding: 0 .6rem; font-size: .8rem; }
#dexList { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
.dx { display: flex; align-items: center; gap: .4rem; background: #fff; border: 3px solid #f0e2c0; border-radius: 1rem; padding: .3rem .5rem; }
.dx .e { font-size: 1.6rem; }
.dx b { display: block; font-size: .9rem; }
.dx small { display: block; font-size: .68rem; opacity: .8; line-height: 1.3; }
.dx.un { opacity: .6; border-style: dashed; }
.tabs button { font-size: .9rem; padding: 0 .2rem; }

/* おみせ: スマホ(たて)で リストが ひろく みえるように */
#shop { height: min(72vh, 660px); height: min(72dvh, 660px); gap: .4rem; padding-top: .5rem; }
#shop header h2 { font-size: 1.05rem; }
#shopFace { width: 2.4rem; height: 2.4rem; }
.tabs { gap: .3rem; }
.tabs button { flex: 1 1 0; min-width: 0; min-height: 2.6rem; padding: 0 .1rem; font-size: .78rem; white-space: nowrap; border-radius: .9rem; }
#shopMsg { font-size: .8rem; padding: .25rem .6rem; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#shopList { min-height: 0; flex: 1 1 auto; }
.item { padding: .3rem .4rem .3rem .5rem; gap: .45rem; }
.item .e { font-size: 1.4rem; }
.item .n { font-size: .88rem; }
#shop > .big { min-height: 2.8rem; padding: .3rem 1rem; font-size: 1rem; flex: none; }
@media (max-height: 520px) and (orientation: landscape) { #shop { height: 100dvh; } }
.item .btns { flex-direction: row; flex-wrap: nowrap; gap: .3rem; }
.item .btns button { min-width: 4.4rem; min-height: 2.6rem; font-size: .8rem; padding: 0 .3rem; }
.item > button { min-width: 4.8rem; min-height: 2.6rem; font-size: .88rem; padding: 0 .4rem; }
.item .n small { font-size: .7rem; }
/* 横向きスマホ/タブレット: タイトルを 1行で 大きく */
@media (max-height: 520px) and (orientation: landscape) {
  #title { padding: 2vh 3vw; gap: 2vw; }
  #title .logo { flex: 1.3; }
  #title h1 { font-size: 2.6rem; white-space: nowrap; line-height: 1.15; }
  #title .menu-col { flex: 1; width: auto; max-width: 340px; }
  #title .fine { flex: 1; font-size: .72rem; }
}

/* ひきつぎコード */
#tfBox { width: 100%; box-sizing: border-box; font-size: .8rem; font-family: monospace; padding: .5rem; border: 3px solid var(--blue); border-radius: 1rem; background: #fff; resize: none; word-break: break-all; touch-action: pan-y; user-select: text; -webkit-user-select: text; }
#tfMsg { min-height: 1.2em; font-weight: bold; }
#btnTransferT.sub { font-size: .95rem; opacity: .9; }

/* おうち: かざりモード */
#btnDeco { position: absolute; right: .6rem; top: calc(env(safe-area-inset-top) + 4.1rem); background: #4f9fe0; color: #fff; border-color: #fff; box-shadow: 0 3px 0 #3478b8, 0 4px 8px #0002; }
#deco { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; max-width: 760px; margin: 0 auto; background: #fff8e8; border-radius: 1.6rem 1.6rem 0 0; box-shadow: 0 -8px 24px #0004; display: flex; flex-direction: column; gap: .4rem; padding: .6rem .8rem calc(env(safe-area-inset-bottom) + .6rem); max-height: 46dvh; touch-action: pan-y; }
#deco.hidden { display: none; }
#deco header { display: flex; justify-content: space-between; align-items: center; }
#decoMsg { background: #ffe9a8; border-radius: 1rem; padding: .25rem .7rem; font-size: .8rem; text-align: center; line-height: 1.35; }
.decoTabs { display: flex; gap: .4rem; }
.decoTabs button { flex: 1; min-height: 2.4rem; border-radius: .9rem; background: #fff; border: 3px solid #f0d9a8; font-size: .9rem; }
.decoTabs button.on { background: var(--yellow); border-color: #e8a800; }
#decoStock { display: flex; gap: .45rem; overflow-x: auto; padding: .15rem 0 .3rem; min-height: 3rem; scrollbar-width: none; touch-action: pan-x; }
#decoStock::-webkit-scrollbar { display: none; }
#decoStock button { flex: none; background: #fff; border: 3px solid var(--blue); border-radius: 99px; padding: .35rem .8rem; font-size: .92rem; min-height: 2.7rem; white-space: nowrap; box-shadow: 0 3px 0 #9ad3ec; }
#decoStock button.on { background: var(--yellow); border-color: #e8a800; box-shadow: 0 3px 0 #d9a800; }
#decoStock p { margin: .5rem 0; font-size: .85rem; white-space: normal; }
.decoPad { display: grid; grid-template-columns: repeat(4, 1fr) 1.7fr 1.5fr; gap: .35rem; }
.decoPad button { min-height: 2.9rem; border-radius: .9rem; background: #fff; border: 3px solid #f0d9a8; font-size: 1.05rem; box-shadow: 0 3px 0 #e0cf9f; padding: 0; }
.decoPad button:disabled { opacity: .4; }
.decoPad #decoRot, .decoPad #decoDel { font-size: .85rem; }
@media (max-height: 520px) and (orientation: landscape) {
  #deco { left: auto; right: 0; top: 0; height: 100dvh; max-height: none; width: min(54vw, 520px); border-radius: 1.6rem 0 0 1.6rem; max-width: none; margin: 0; }
  #btnDeco { top: calc(env(safe-area-inset-top) + 3.9rem); }
}
#invList { display: flex; flex-direction: column; gap: .5rem; }
#invList .inv { display: flex; align-items: center; gap: .6rem; background: #fff; border: 3px solid #f0d9a8; border-radius: 1.2rem; padding: .4rem .6rem; }
#invList .inv img { width: 2.8rem; height: 2.8rem; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 2px #d9c9a8; background: #dff4ff; flex: none; }
#invList .inv div { flex: 1; font-size: .95rem; line-height: 1.3; }
#invList .inv small { display: block; font-size: .75rem; opacity: .75; }
#invList .inv button { min-height: 2.6rem; padding: 0 .8rem; border-radius: 99px; border: 3px solid var(--blue); background: #fff; font-size: .9rem; flex: none; }
#invList .inv button.on { background: var(--yellow); border-color: #e8a800; }
#invList .inv button:disabled { opacity: .45; }
.shop-h { margin: .5rem 0 .1rem; font-weight: bold; font-size: .9rem; color: #7a5a30; }

#shop .tabs button { display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; font-size: .7rem; min-height: 2.9rem; }
#shop .tabs button i { font-style: normal; font-size: 1.05rem; line-height: 1; }

/* さかなの SVG アイコン */
svg.fi { height: 1.1em; width: 1.6em; vertical-align: -.14em; overflow: visible; }
.cc-e svg.fi { height: 1em; width: 1.5em; filter: drop-shadow(0 4px 4px #0003); }

/* はたけ */
.talk.farmbtn { bottom: calc(env(safe-area-inset-bottom) + 16.8rem); background: #6aa84f; box-shadow: 0 5px 0 #4a7f36, 0 8px 14px #0003; text-shadow: 0 1px 0 #4a7f36; animation: none; }
@media (max-height: 520px) and (orientation: landscape) { .talk.farmbtn { bottom: calc(env(safe-area-inset-bottom) + 10.4rem); } }
#seedList { display: flex; flex-direction: column; gap: .5rem; }
#seedList button { display: flex; align-items: center; gap: .6rem; text-align: left; background: #fff; border: 3px solid var(--blue); border-radius: 1.1rem; padding: .5rem .8rem; font-size: 1rem; min-height: 3rem; }
#seedList button small { opacity: .7; margin-left: auto; }