@charset "UTF-8";
:root{--ink:#233b36;--muted:#7d8980;--paper:#fffaf0;--peach:#fff1df;--orange:#e77c50;--orange-dark:#ca5c37;--green:#27695d;--mint:#d2e9da;--line:#e7e3d6;--shadow:0 16px 45px rgba(77,66,45,.12)}
*,*::before,*::after{box-sizing:border-box}html,body{height:100%;margin:0}body{font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",Meiryo,sans-serif;color:var(--ink);background:var(--paper);-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;touch-action:manipulation}button:focus-visible,input:focus-visible{outline:3px solid #64aa98;outline-offset:2px}button:disabled{opacity:.4;cursor:not-allowed}h1,h2,h3,p{margin-top:0}#app{min-height:100%;position:relative;overflow:hidden}.page[hidden],.dialog-backdrop[hidden]{display:none!important}.page{min-height:100dvh}.btn{border:0;min-height:43px;padding:11px 17px;border-radius:15px;font-weight:900;font-size:14px;display:inline-flex;align-items:center;justify-content:center;gap:7px;text-decoration:none;transition:transform .16s,filter .16s,background .16s;white-space:nowrap}.btn:active{transform:translateY(2px) scale(.98)}.btn-main{background:var(--orange);color:white;box-shadow:0 5px 0 #bc6746}.btn-main:hover{background:#e56d41}.btn-cream{background:#fffdf7;color:var(--green);border:1.5px solid #e4e4d7;box-shadow:0 3px 0 #dcdccf}.btn-ghost{background:transparent;color:var(--muted)}.btn-xl{font-size:17px;min-height:60px;padding:14px 20px;border-radius:20px;justify-content:flex-start}.btn-xl .arrow{margin-left:auto;font-size:23px}.wide{width:100%;margin-top:14px}.circle-btn{border:1px solid #e5e1d4;width:39px;height:39px;flex:0 0 39px;border-radius:14px;background:#fffcf6;font-size:21px;color:var(--green);display:grid;place-items:center}.circle-btn:hover{background:var(--mint)}.small-kicker,.topbar-kicker{font:800 10px/1.4 Arial,sans-serif;letter-spacing:1.5px;color:var(--orange);display:block}.eyebrow{display:flex;align-items:center;gap:8px;color:#b56b50;font-weight:800;font-size:13px;letter-spacing:.5px}.eyebrow-dot{width:8px;height:8px;border-radius:50%;background:var(--orange)}
/* Title */
.home-page{min-height:100dvh;display:flex;flex-direction:column;position:relative;isolation:isolate;background:radial-gradient(ellipse 60% 70% at 80% 48%,#fbedd7 0%,transparent 90%),linear-gradient(140deg,#fffaf1,#fff9ed 55%,#f8eee2);padding:26px max(25px,calc((100vw - 1160px)/2)) 20px;overflow:auto}.home-bg-decoration{position:absolute;border:2px dashed #f4dfc7;border-radius:50%;z-index:-1;pointer-events:none}.d1{width:480px;height:480px;right:-200px;top:-240px}.d2{width:300px;height:300px;left:-220px;bottom:-150px}.home-nav{display:flex;justify-content:space-between;align-items:center;gap:12px}.brand-mark{font-weight:900;display:flex;align-items:center;gap:6px;color:var(--green)}.brand-mark span{font:900 12px Arial,sans-serif;letter-spacing:2.4px}.version{color:#a39e8c;font-size:10px;letter-spacing:1.5px;font-weight:800}.home-content{width:100%;display:grid;grid-template-columns:minmax(310px,1fr) minmax(340px,1.14fr);align-items:center;gap:25px;flex:1;min-height:500px}.home-copy{padding:25px 0 15px}.home-copy h1{font-size:clamp(48px,5.4vw,80px);line-height:1.21;letter-spacing:-.075em;margin:22px 0 22px;font-weight:950;position:relative}.home-copy h1>span:first-child{color:var(--orange)}.h1-sparkle{color:#88bca3;font-size:.42em;position:absolute;top:12px;margin-left:8px;letter-spacing:0}.lead{color:#667b71;font-size:clamp(15px,1.4vw,18px);line-height:2.1;font-weight:700;margin-bottom:27px}.home-buttons{display:flex;flex-direction:column;gap:13px;max-width:340px}.secondary-actions{display:flex;flex-wrap:wrap;gap:13px 16px;margin-top:23px;max-width:430px}.secondary-actions button{background:none;border:0;color:var(--green);padding:5px 0;font-weight:900;font-size:13px}.secondary-actions button:hover{text-decoration:underline}.hero-illustration{position:relative;align-self:center;text-align:center;padding:32px 0}.hero-illustration img{display:block;max-width:100%;max-height:min(67vh,600px);filter:drop-shadow(4px 23px 17px rgba(117,90,49,.13));animation:float 5s ease-in-out infinite}.hero-sticker{position:absolute;left:3%;top:17%;background:#fff;border:2px solid #f0d7b4;box-shadow:0 8px 18px #b79b7633;z-index:1;border-radius:50%;padding:17px 11px;transform:rotate(-14deg);color:var(--green);font-size:14px;font-weight:900;line-height:1.55}.hero-sticker b{color:var(--orange)}.hero-caption{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 20px;color:#6d8b79;font-weight:800;font-size:12px}.home-bottom{border-top:1px solid #eae4d7;padding-top:16px;display:flex;justify-content:space-between;gap:20px;color:#998f79;font-size:11px;font-weight:700}@keyframes float{50%{transform:translateY(-8px)}}
/* Game */
.game-page{height:100dvh;min-height:0;display:flex;flex-direction:column;overflow:hidden;background:linear-gradient(#fffbf4,#f7f3e9);padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}.game-topbar{flex:0 0 49px;display:flex;align-items:center;gap:11px;background:#fffdfa;border-bottom:1px solid #eee6d9;padding:5px 12px;z-index:5}.topbar-heading{display:flex;flex-direction:column;min-width:0;line-height:1.32}.topbar-heading strong{font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.topbar-tools{display:flex;align-items:center;gap:6px;margin-left:auto}.clock{font-variant-numeric:tabular-nums;font-size:12px;font-weight:900;color:#8e9a8c;background:#f3f5ec;border-radius:9px;padding:6px 8px}.game-layout{flex:1;min-height:0;display:flex;flex-direction:column;max-width:1050px;width:100%;margin:auto}.board-column{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;position:relative}.mission-bar{flex:0 0 auto;min-height:56px;padding:7px 13px 6px;display:flex;gap:9px;align-items:center}.customer-avatar{width:41px;height:41px;border-radius:14px;background:#ffedd7;display:grid;place-items:center;font-size:24px;border:1px solid #f1debe}.mission-main{min-width:0;flex:1}.mission-kicker{display:block;font-size:10px;color:#a78a6b;font-weight:800;white-space:nowrap}.mission-main strong{display:block;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.score-pill{text-align:right;background:#dcefe4;border-radius:12px;padding:5px 12px;min-width:88px}.score-pill span{display:block;color:#5e8978;font:800 9px Arial;letter-spacing:1px}.score-pill strong{display:block;font-size:21px;color:#226453;line-height:1.1;font-variant-numeric:tabular-nums}.board-viewport{flex:1 1 40px;min-height:0;display:flex;align-items:center;justify-content:center;padding:2px 12px 1px;overflow:hidden}.board-wrap{height:min(100%,435px);aspect-ratio:1;max-width:100%;position:relative;background:#d4af85;padding:7px;border:4px solid #bd9873;border-radius:27px;box-shadow:0 7px 0 #9e7955,0 15px 28px #624b2b22}.board{height:100%;width:100%;display:grid;gap:3px;padding:5px;background:#f1ddba;border-radius:18px;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none}.board-cell{min-width:0;min-height:0;border:0;border-radius:8px;padding:0;position:relative;display:grid;place-items:center;background:repeating-linear-gradient(45deg,#fdf2d8,#fdf2d8 10px,#f9ebce 10px,#f9ebce 20px);box-shadow:inset 0 1px 3px #896e4223;touch-action:none}.board-cell.filled{background:var(--foodcolor);box-shadow:inset 0 -3px 0 #00000012,inset 0 2px 0 #ffffff7a;outline:1px solid #ffffff70;outline-offset:-1px}.board-cell.filled:before{content:'';position:absolute;inset:7px;border-radius:50%;border:1px dashed #ffffff88;pointer-events:none}.board-cell img{width:min(73%,42px);height:min(73%,42px);object-fit:contain;position:relative;pointer-events:none;filter:drop-shadow(0 2px 1px #0000001c)}.board-cell .little-dot{width:6px;height:6px;background:#ffffff7a;border-radius:50%;box-shadow:7px 4px 0 #ffffff33;pointer-events:none}.board-cell.selected{outline:3px solid #3c8974;outline-offset:-3px;z-index:2}.board-cell.ghost-valid{background:#a4ddc1aa;outline:2px dashed #2d9974;outline-offset:-2px;z-index:3}.board-cell.ghost-invalid{background:#ec9e9f77;outline:2px dashed #c75561;outline-offset:-2px;z-index:3}.board-cell.hinted{box-shadow:inset 0 0 0 3px #e8aa42;animation:pulse 1s ease-in-out 3}.board-cell:focus-visible{z-index:4}.board-feedback{flex:0 0 23px;display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px;padding:0 13px;color:#758576;font-weight:700}.board-feedback #feedback{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.board-feedback #occupancy{white-space:nowrap}.board-effect{pointer-events:none;position:absolute;left:50%;top:42%;font-size:24px;color:#ec8b57;font-weight:900;transform:translate(-50%,-50%);opacity:0}.board-effect.pop{animation:scorePop .65s ease-out both}@keyframes scorePop{0%{transform:translate(-50%,-25%) scale(.7);opacity:0}25%{transform:translate(-50%,-55%) scale(1.2);opacity:1}100%{transform:translate(-50%,-145%) scale(1);opacity:0}}@keyframes pulse{50%{filter:brightness(1.18)}}
.controls-column{flex:0 0 auto;min-height:0;padding:0 11px 9px}.order-strip{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;min-height:37px;padding:2px 0 4px;align-items:center}.order-strip::-webkit-scrollbar,.tray-scroller::-webkit-scrollbar{display:none}.order-chip{display:flex;align-items:center;gap:4px;white-space:nowrap;font-size:10px;font-weight:800;color:#8d7864;background:#fff9ef;border:1px solid #e8dfcd;border-radius:9px;padding:7px 9px}.order-chip.done{color:#29735c;background:#e8f4e8;border-color:#b8deba}.order-chip:before{content:'○';font-size:13px}.order-chip.done:before{content:'✓';font-weight:900}.tray-top{display:flex;justify-content:space-between;align-items:end;margin:4px 2px 5px}.tray-top strong{font-size:13px;display:block}.tray-count{font-size:11px;color:#849287;font-weight:800}.tray-scroller{display:flex;align-items:stretch;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;gap:7px;min-height:78px;max-height:87px;padding:1px 2px 5px;touch-action:pan-x;overscroll-behavior-x:contain}.tray-piece{position:relative;flex:0 0 74px;min-width:0;min-height:75px;background:#fffbf1;border:1.5px solid #e7e2d2;border-radius:13px;padding:4px 3px 3px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--ink);touch-action:pan-x}.tray-piece.selected{background:#ecf5e8;border:2px solid #4d9773;box-shadow:0 0 0 2px #bad6bb}.tray-piece.placed{background:#f4f1e8;opacity:.58}.tray-piece.placed.selected{opacity:1}.tray-piece .dish-emoji{width:32px;height:32px;object-fit:contain}.tray-piece .piece-label{font-size:9px;font-weight:900;line-height:1.3;overflow:hidden;max-width:100%;white-space:nowrap;text-overflow:ellipsis}.mini-dots{position:absolute;top:4px;right:4px;display:grid;grid-template-columns:repeat(3,4px);grid-template-rows:repeat(3,4px);gap:1px}.mini-dots span{width:4px;height:4px;border-radius:1px;background:#deded3}.mini-dots span.on{background:#e2a269}.tray-piece.placed:after{content:'✓';position:absolute;top:2px;left:5px;color:#32755d;font-weight:900;font-size:13px}.control-actions,.game-actions{display:grid;gap:7px;margin-top:7px}.control-actions{grid-template-columns:repeat(3,minmax(0,1fr))}.control-actions .btn{background:#fffef9;border:1px solid #e2e0d2;color:var(--green);min-height:38px;padding:7px 4px;box-shadow:0 2px 0 #ddd9c9}.control-actions .btn>span{font-size:20px;line-height:1}.control-actions kbd{font-size:9px;background:#eaf0e8;color:#8da197;border-radius:4px;padding:2px 3px;line-height:1}.game-actions{grid-template-columns:minmax(110px,1fr) minmax(155px,1.6fr)}.game-actions .btn{min-height:44px;border-radius:13px}.btn-hint{color:#a77232;background:#fff0ca;border:1px solid #f6df9d}.btn-hint small{font-size:8px;color:#a8815e}.btn-finish{background:var(--green);color:white;box-shadow:0 3px 0 #17483f}.btn-finish span{font-size:21px}
/* Info screens */
.info-page{background:linear-gradient(#fffaf1,#f9f3e8);padding:calc(20px + env(safe-area-inset-top)) 17px calc(30px + env(safe-area-inset-bottom));overflow-y:auto}.info-shell{max-width:620px;margin:auto}.info-head{display:flex;gap:13px;align-items:center;margin-bottom:22px}.info-head h2{font-size:28px;margin:0;letter-spacing:-1px}.help-intro{display:flex;gap:14px;align-items:center;background:#dcefe3;border:1px solid #c1dfc8;border-radius:20px;padding:16px 19px;font-weight:900;font-size:16px}.help-intro:first-letter{font-size:28px}.help-steps{display:grid;gap:10px;margin:17px 0}.help-steps article{display:grid;grid-template-columns:27px 45px 1fr;gap:9px;align-items:center;padding:13px 15px;background:white;border:1px solid #eee7d9;border-radius:16px}.step-number{font-size:12px;color:var(--orange);font-weight:900}.step-icon{font-size:30px}.help-steps h3{font-size:15px;margin:0 0 4px}.help-steps p{font-size:12px;color:#6c8175;line-height:1.7;margin:0}.help-note{border-left:4px solid var(--orange);padding:13px 16px;background:#fff1e1;border-radius:4px 12px 12px 4px;color:#846853;font-size:12px;line-height:1.8}.info-lead{font-size:13px;color:var(--muted)}.album-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;min-height:120px}.album-card{background:white;border:1px solid var(--line);border-radius:17px;overflow:hidden;box-shadow:0 4px 10px #d2bca119}.album-card img{display:block;width:100%;aspect-ratio:1;object-fit:cover;background:#eddfc7}.album-meta{padding:10px 12px}.album-meta strong{display:block;font-size:14px}.album-meta small{display:block;color:#849187;margin-top:3px;font-size:11px}.empty-album{grid-column:1/-1;text-align:center;padding:45px 20px;color:#869287;border:2px dashed #e0dfd1;border-radius:20px}.empty-album strong{display:block;color:var(--green);margin-top:12px}.empty-album span{font-size:47px}.settings-panel{background:#fff;border-radius:16px;overflow:hidden;border:1px solid #e6dfce}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px;border-bottom:1px solid #eee8dd;font-weight:900}.setting-row:last-child{border:0}.setting-row small{font-size:11px;color:#8d9387;display:block;font-weight:500;margin-top:5px}.setting-row input{appearance:none;width:51px;height:29px;background:#d4d4cd;border-radius:20px;position:relative;flex:0 0 51px;cursor:pointer}.setting-row input:before{content:'';width:23px;height:23px;border-radius:50%;background:white;position:absolute;top:3px;left:3px;box-shadow:0 2px 3px #0002;transition:transform .18s}.setting-row input:checked{background:#43977a}.setting-row input:checked:before{transform:translateX(22px)}.privacy-note{background:#f1f4eb;border-radius:12px;padding:16px;line-height:1.85;font-size:12px;color:#667e70;margin:22px 0}
/* Result */
.result-page{background:radial-gradient(circle at 50% 25%,#ffedd7,transparent 60%),#fffaf1;padding:calc(18px + env(safe-area-inset-top)) 15px calc(25px + env(safe-area-inset-bottom));overflow:auto}.result-shell{max-width:880px;margin:auto}.result-top{text-align:center}.result-top h2{font-size:clamp(26px,4vw,39px);margin:4px 0;letter-spacing:-1.5px}.result-top h2 span{color:#e4a34c}.result-top p{font-size:13px;color:#74897d;font-weight:800;margin-bottom:14px}.result-layout{display:grid;grid-template-columns:minmax(270px,1fr) minmax(260px,1fr);gap:20px;align-items:start}.result-photo{position:relative;padding:13px 13px 27px;background:#fff;box-shadow:var(--shadow);transform:rotate(-2deg);margin:7px}.result-photo canvas{display:block;width:100%;aspect-ratio:1;background:#f5e8d4}.photo-tape{position:absolute;bottom:5px;left:0;right:0;text-align:center;font:900 13px 'Arial',sans-serif;letter-spacing:2px;color:#a8a090}.result-data{background:#fffdf8;border:1px solid #ede4d8;border-radius:20px;padding:18px}.result-ranking{display:flex;gap:15px;align-items:center;border-bottom:1px dashed #e3ddd1;padding-bottom:13px;margin-bottom:10px}.result-ranking>span{font-size:10px;writing-mode:vertical-rl;color:#b6a184;font-weight:800}.result-ranking>strong{font:900 77px/1 Arial,sans-serif;color:#d57d52}.result-ranking>div{display:flex;flex-direction:column}.result-ranking>div span{font-size:11px;color:#7a9181;font-weight:800}.result-ranking>div strong{font:900 37px Arial,sans-serif;color:var(--green)}.result-ranking>div small{font-size:10px;color:#ad8059;margin-top:2px}.result-breakdown{font-size:13px}.result-breakdown .break-row{display:flex;justify-content:space-between;margin:7px 0;gap:10px}.break-row span{color:#748478}.break-row strong{font-variant-numeric:tabular-nums}.break-row.minus strong{color:#bd7659}.result-orders{display:flex;flex-wrap:wrap;gap:5px;padding:12px 0}.result-orders span{border-radius:9px;padding:6px 8px;font-size:10px;font-weight:800;background:#f6eee2;color:#ad9280}.result-orders span.done{color:#3d8566;background:#e6f3e8}.result-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.result-actions button{padding:11px 6px;white-space:normal;line-height:1.3}.result-actions button:first-child{grid-column:1/-1}.result-actions button:last-child{grid-column:1/-1}
/* Toasts and dialogs */
.toast{position:fixed;z-index:60;left:50%;bottom:calc(17px + env(safe-area-inset-bottom));transform:translate(-50%,14px);background:#294d44;color:white;border-radius:13px;box-shadow:var(--shadow);font-size:12px;font-weight:800;line-height:1.5;padding:11px 20px;opacity:0;pointer-events:none;max-width:min(90vw,450px);text-align:center;transition:opacity .2s,transform .2s}.toast.visible{opacity:1;transform:translate(-50%,0)}.dialog-backdrop{position:fixed;z-index:40;inset:0;background:#172f2b88;display:grid;place-items:center;padding:18px}.dialog{background:#fffaf2;width:min(370px,100%);padding:24px 22px;border-radius:25px;text-align:center;box-shadow:0 24px 100px #172f2b55}.dialog-emoji{font-size:46px}.dialog h3{margin:9px 0;font-size:20px}.dialog p{font-size:13px;color:#738476;line-height:1.8;white-space:pre-line}.dialog-buttons{display:flex;gap:9px;margin-top:22px}.dialog-buttons button{flex:1}
@media (min-width:760px) and (min-height:590px){.game-page{background:radial-gradient(circle at 55% 45%,#eef1df,#fdfaf2)}.game-layout{flex-direction:row;gap:18px;padding:16px 22px 22px}.board-column{flex:1 1 54%;min-width:0;background:#fffdf8;border-radius:22px;box-shadow:0 8px 28px #8d785b15;padding:6px}.mission-bar{min-height:75px;padding:8px 16px}.customer-avatar{width:52px;height:52px;font-size:28px}.mission-main strong{font-size:16px}.score-pill strong{font-size:27px}.board-viewport{padding:5px}.board-wrap{height:min(100%,540px)}.board-feedback{flex-basis:32px;font-size:12px;padding:0 15px}.controls-column{flex:0 1 40%;display:flex;flex-direction:column;justify-content:center;min-width:0;background:#fffdf8;border-radius:22px;box-shadow:0 8px 28px #8d785b15;padding:20px 15px}.order-strip{flex-wrap:wrap;overflow:visible;margin-bottom:12px}.order-chip{font-size:11px}.tray-top{margin:12px 2px 9px}.tray-top strong{font-size:19px}.tray-scroller{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));overflow-y:auto;max-height:none;min-height:0;flex:0 1 auto;gap:8px}.tray-piece{min-height:85px;flex-basis:auto}.tray-piece .dish-emoji{width:36px;height:36px}.tray-piece .piece-label{font-size:10px}.control-actions{margin-top:14px}.control-actions .btn{min-height:48px}.game-actions{margin-top:12px}.game-actions .btn{min-height:54px}}
@media (max-width:760px){.home-page{padding:18px 20px 22px}.home-content{display:flex;flex-direction:column;gap:0;min-height:0;padding-top:24px}.home-copy{padding:0;width:100%;max-width:520px}.home-copy h1{font-size:clamp(45px,11vw,65px);margin:15px 0 8px}.lead{font-size:14px;line-height:1.8;margin:8px 0 18px}.home-buttons{max-width:none;gap:10px}.btn-xl{min-height:53px}.secondary-actions{margin-top:15px;justify-content:space-between;gap:10px}.secondary-actions button{font-size:12px}.hero-illustration{padding:0;max-width:430px;width:100%;margin:10px auto 12px}.hero-illustration img{height:clamp(160px,37vh,370px);margin:auto;max-width:100%}.hero-sticker{top:9%;left:5%;padding:11px 8px;font-size:11px}.hero-caption{font-size:10px}.home-bottom{font-size:9px}}
@media (max-width:390px){.topbar-heading strong{font-size:13px}.clock{padding:5px;font-size:10px}.game-topbar{gap:6px}.game-topbar .circle-btn{width:34px;height:34px;flex-basis:34px}.mission-bar{min-height:51px}.customer-avatar{width:37px;height:37px;font-size:20px}.score-pill strong{font-size:19px}.order-chip{font-size:9px;padding:6px}.tray-scroller{min-height:72px;max-height:76px}.tray-piece{min-height:71px;flex-basis:67px}.tray-piece .dish-emoji{width:28px;height:28px}.control-actions,.game-actions{margin-top:5px}.control-actions .btn{min-height:35px}.game-actions .btn{min-height:40px;font-size:12px}}
@media (orientation:landscape) and (max-height:590px){.game-layout{flex-direction:row;padding:4px 8px 6px;gap:8px}.game-topbar{flex-basis:42px;padding:3px 8px}.board-column{flex:1 1 53%;min-width:0}.mission-bar{min-height:44px;padding:2px 4px}.mission-main strong{font-size:12px}.customer-avatar{height:35px;width:35px;font-size:20px}.score-pill strong{font-size:16px}.board-viewport{padding:0}.board-wrap{height:min(100%,360px);border-width:3px;border-radius:19px;padding:5px;box-shadow:0 4px 0 #9e7955}.board{gap:2px;padding:3px;border-radius:12px}.board-cell{border-radius:5px}.board-feedback{flex-basis:19px;font-size:10px;padding:0 4px}.controls-column{flex:1 1 47%;min-width:0;display:flex;flex-direction:column;justify-content:space-between;padding:0 2px;overflow:hidden}.order-strip{flex:0 0 auto;min-height:27px;padding:0;gap:3px;max-height:29px}.order-chip{font-size:9px;padding:5px}.tray-top{margin:2px 2px 3px}.tray-top strong{font-size:12px}.tray-scroller{flex:1 1 auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(61px,1fr);overflow-x:hidden;overflow-y:auto;max-height:none;min-height:52px;gap:4px;padding:0}.tray-piece{min-height:56px;flex-basis:auto;padding:2px;border-radius:9px}.tray-piece .dish-emoji{width:22px;height:22px}.tray-piece .piece-label{font-size:8px}.mini-dots{display:none}.control-actions{flex:0 0 auto;margin-top:4px;gap:4px}.control-actions .btn{min-height:29px;padding:3px;font-size:11px}.control-actions .btn>span{font-size:15px}.control-actions kbd{display:none}.game-actions{flex:0 0 auto;margin-top:4px;gap:4px}.game-actions .btn{min-height:34px;padding:5px;font-size:11px}.game-actions .btn small{font-size:8px}}
@media (max-width:620px){.result-layout{display:flex;flex-direction:column;gap:12px;align-items:stretch}.result-photo{align-self:center;width:min(70vw,300px);padding:8px 8px 23px}.result-data{padding:12px}.result-top h2{font-size:27px}.result-ranking>strong{font-size:51px}.result-ranking>div strong{font-size:28px}.result-breakdown{display:grid;grid-template-columns:1fr 1fr;gap:0 12px;font-size:12px}.result-actions{grid-template-columns:1fr 1fr}.result-actions button:first-child{grid-column:1/-1}.result-page{padding-top:12px}.result-top p{margin-bottom:8px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}}
body.reduced-motion *{animation-duration:.001ms!important;transition-duration:.001ms!important}
/* Small-height phones keep the hero artwork within the opening viewport. */
@media (max-width:760px) and (max-height:700px){.home-content{padding-top:16px}.home-copy h1{font-size:clamp(43px,10.7vw,58px)}.hero-illustration img{height:155px}.hero-caption,.home-bottom{display:none}.home-copy{padding-bottom:0}}
/* Landscape trays keep their pieces compact, even when only 3 tutorial pieces exist. */
@media (orientation:landscape) and (max-height:590px){.tray-scroller{grid-auto-rows:minmax(58px,74px);align-content:start}.tray-piece{min-height:58px}}
@media (max-width:620px){.result-photo{width:min(54vw,200px);padding:7px 7px 20px}.result-top h2{font-size:24px}.result-top p{font-size:11px;margin-bottom:5px}.result-layout{gap:8px}.result-ranking{padding-bottom:6px;margin-bottom:5px}.result-ranking>strong{font-size:45px}.result-ranking>div strong{font-size:27px}.result-breakdown .break-row{margin:4px 0}.result-orders{padding:6px 0;gap:4px}.result-orders span{padding:5px;font-size:9px}.result-actions{gap:5px}.result-actions button{min-height:36px;padding:7px 5px;font-size:12px}.result-actions button:last-child{min-height:25px;padding:3px 4px;font-size:11px}.result-data{padding:10px}.result-shell{max-width:390px}}
/* Prevent native image dragging from cancelling Pointer Events on food cards. */
img{-webkit-user-drag:none;user-select:none;-webkit-user-select:none}

/* v0.1.1: three compact export actions use a single row even on small phones. */
.result-actions{grid-template-columns:repeat(3,minmax(0,1fr))}.result-actions button:first-child,.result-actions button:last-child{grid-column:1/-1}.result-actions button{white-space:normal;overflow-wrap:anywhere}
@media(max-width:390px){.result-actions button{font-size:11px;gap:3px;padding-left:3px;padding-right:3px}}

/* v0.1.2: result-page artwork tools and richer album cards */
.result-creator{border:1px solid #ece3d8;background:#fff9f3;border-radius:16px;padding:12px 12px 11px;margin-bottom:11px;display:grid;gap:10px}
.result-section-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.result-section-head span{font-size:14px;font-weight:900;color:#365f52}.result-section-head small{font-size:10px;color:#8d9386}
.title-editor{display:grid;gap:6px}.title-editor>span,.theme-label-row span{font-size:11px;font-weight:800;color:#7a8a7f}
.title-editor input{width:100%;border:1px solid #dfd7cc;border-radius:12px;padding:12px 13px;background:#fff;box-sizing:border-box;font:800 16px/1.3 inherit;color:#285145}
.title-editor input:focus{outline:3px solid #f7dbc0;border-color:#c87c59}
.theme-label-row{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:6px}.theme-label-row strong{font-size:11px;color:#b56d52}
.theme-picker{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.theme-chip{display:flex;align-items:center;gap:10px;width:100%;padding:8px 9px;border-radius:14px;border:1px solid #dfd6ca;background:#fff;cursor:pointer;text-align:left}.theme-chip.selected{border-color:#d77f56;box-shadow:0 0 0 2px #ffd7bf inset;background:#fff7ef}.theme-swatch{flex:0 0 42px;height:42px;border-radius:11px;border:1px solid #ffffffaa;box-shadow:inset 0 1px 0 #fff8,0 1px 4px #00000012;background:var(--swatch,#f3e5cd)}.theme-chip strong{display:block;font-size:12px;color:#2f5347}.theme-chip small{display:block;font-size:10px;color:#8d9387;margin-top:2px}
.result-photo.theme-wood{background:linear-gradient(180deg,#fffefc,#fef9f2)}
.result-photo.theme-cloth{background:linear-gradient(180deg,#fffefc,#fff7fb)}
.result-photo.theme-sakura{background:linear-gradient(180deg,#fffefc,#fff5f6)}
.result-photo.theme-tile{background:linear-gradient(180deg,#ffffff,#f4fbff)}
.album-list{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
.album-card{display:flex;flex-direction:column}.album-meta{display:grid;gap:5px}.album-title{font-size:15px;line-height:1.35;color:#285145}.album-summary{font-size:11px;color:#73867a;font-weight:800}.album-tags{display:flex;flex-wrap:wrap;gap:5px}.album-tags span{display:inline-flex;align-items:center;padding:4px 7px;border-radius:999px;background:#f3ece1;color:#896e59;font-size:10px;font-weight:800}.album-tags .theme-tag{background:#ebf4ee;color:#4f7b68}
@media (max-width:620px){.result-creator{padding:10px;gap:8px}.title-editor input{padding:10px 11px;font-size:15px}.theme-picker{grid-template-columns:1fr 1fr}.theme-chip{padding:7px 8px;gap:8px}.theme-swatch{flex-basis:36px;height:36px}.result-section-head span{font-size:13px}.album-list{grid-template-columns:1fr}.album-card img{aspect-ratio:1.15}}

/* v0.1.4: AI illustration mock modal + provider settings */
.result-top{position:relative;overflow:visible}.result-celebration{position:relative;margin-top:10px;padding:8px 14px 14px;border-radius:18px;background:linear-gradient(180deg,#fff9f2,#fff3e4);border:1px solid #f0d7bc;box-shadow:0 6px 18px #c48a4d1f}.result-celebration strong{display:inline-flex;align-items:center;justify-content:center;padding:7px 14px;border-radius:999px;background:#de7a4f;color:#fff;font-size:15px;letter-spacing:.08em;box-shadow:0 4px 0 #bc6842}.result-celebration p{margin:10px 0 0;color:#6e7b73;font-size:13px;font-weight:800}
.result-confetti{pointer-events:none;position:absolute;inset:0;overflow:hidden}.result-confetti span{position:absolute;top:-10px;width:12px;height:20px;border-radius:4px;opacity:.92;animation:confetti-fall 1100ms ease-in forwards}.result-confetti span.circle{width:11px;height:11px;border-radius:50%}.result-confetti span.ribbon{height:18px;border-radius:12px 12px 4px 4px}.reduced-motion .result-confetti span{display:none}
@keyframes confetti-fall{0%{transform:translateY(-10px) rotate(0deg);opacity:0}15%{opacity:1}100%{transform:translateY(120px) rotate(220deg);opacity:0}}
.title-suggestions-wrap{display:grid;gap:6px}.title-suggestion-list{display:flex;flex-wrap:wrap;gap:6px}.suggestion-chip,.link-chip{border:1px solid #e3d6c7;background:#fff;border-radius:999px;padding:7px 10px;font:800 11px/1.2 inherit;color:#426055;cursor:pointer}.suggestion-chip:hover,.link-chip:hover{border-color:#d57e56;background:#fff6ef}.suggestion-chip.selected{background:#f8ede3;border-color:#d57e56;color:#9c5c3f}.link-chip{font-size:10px;padding:6px 9px;color:#8e624b}
.theme-picker{grid-template-columns:repeat(2,minmax(0,1fr))}.theme-chip{min-height:58px}.theme-chip strong{line-height:1.25}.theme-chip small{line-height:1.25}
.result-photo.theme-garden{background:linear-gradient(180deg,#fbfffb,#eff8ee)}.result-photo.theme-cafe{background:linear-gradient(180deg,#fffdfb,#f3ece6)}.result-photo.theme-sky{background:linear-gradient(180deg,#fcfeff,#eef7ff)}.result-photo.theme-festival{background:linear-gradient(180deg,#fff8fb,#fff0d7)}
.album-card{cursor:pointer;border:1px solid #e8dccd;border-radius:20px;background:#fffefb;padding:10px;box-shadow:0 6px 20px #00000008;transition:transform .18s ease,box-shadow .18s ease}.album-card:hover{transform:translateY(-2px);box-shadow:0 12px 24px #00000010}.album-card button{all:unset;display:block;cursor:pointer}.album-card img,.album-card canvas{width:100%;border-radius:14px;display:block;aspect-ratio:1.15;object-fit:cover;background:#f8efe4}.album-title-row{display:flex;justify-content:space-between;align-items:center;gap:8px}.album-open-indicator{color:#b26e52;font-size:12px;font-weight:900}
.album-detail-backdrop{padding:18px;overflow:auto;align-items:flex-start}.album-detail-dialog{max-width:min(940px,94vw);width:100%;max-height:90vh;overflow:auto;position:relative;border-radius:28px;padding:22px 20px 20px;background:#fffaf6}.album-close-btn{position:absolute;right:12px;top:12px;border:none;background:#f7ecdf;color:#7b6a58;width:34px;height:34px;border-radius:50%;font:900 20px/1 inherit;cursor:pointer}.album-detail-head{text-align:left;padding-right:42px}.album-detail-head h3{margin:4px 0 6px;color:#274e42}.album-detail-head p{margin:0;color:#7c877d;font-weight:700;font-size:12px}.album-detail-body{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:18px;margin-top:16px;align-items:start}.album-detail-photo{padding:12px;border-radius:20px;background:linear-gradient(180deg,#fffefc,#fff6ef)}.album-detail-photo canvas{width:100%;height:auto;display:block;border-radius:14px;background:#fff}.album-detail-info{display:grid;gap:12px}.album-detail-score{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:18px;background:#fff4e8;border:1px solid #edd8c6}.album-detail-score>span{display:grid;place-items:center;width:64px;height:64px;border-radius:18px;background:#dd7b50;color:#fff;font-size:34px;font-weight:900}.album-detail-score strong{display:block;font-size:36px;line-height:1;color:#255246}.album-detail-score small{display:block;color:#7f867c;font-size:12px;font-weight:800;margin-top:6px}.result-breakdown.compact{padding:12px}.result-orders.compact{padding:10px}.album-detail-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media (max-width:760px){.album-detail-body{grid-template-columns:1fr}.album-detail-actions{grid-template-columns:1fr}.result-celebration{padding:8px 12px 12px}.title-suggestion-list{gap:5px}}
@media (max-width:620px){.result-celebration strong{font-size:13px;padding:6px 12px}.result-celebration p{font-size:12px}.suggestion-chip,.link-chip{font-size:10px;padding:7px 8px}.theme-picker{grid-template-columns:1fr 1fr}.album-detail-backdrop{padding:10px}.album-detail-dialog{padding:16px 14px 14px;border-radius:20px}.album-detail-score strong{font-size:32px}.album-detail-score>span{width:58px;height:58px;font-size:31px}}
.settings-section-head{padding:16px 18px 8px;font-weight:900;color:#274e42}.settings-section-head small{display:block;font-size:11px;color:#839182;margin-top:4px;font-weight:700}.ai-settings-panel{margin-top:16px;padding-bottom:12px}.setting-stack{display:grid;gap:8px;padding:12px 18px}.setting-stack span{font-weight:900;color:#335649}.setting-stack small{display:block;color:#8b9387;font-size:11px;font-weight:600;margin-top:4px}.setting-stack select,.setting-stack input{width:100%;border:1px solid #dfd7cb;border-radius:12px;padding:12px 14px;background:#fffdf8;font:inherit;color:#305549}.provider-note{background:#f4f7f1;border:1px solid #dde6d7;border-radius:14px;padding:12px 14px;color:#60776d;font-size:12px;line-height:1.7;margin:0 18px 10px}.provider-note.subtle{background:#fff9f0;border-color:#eee0c8;color:#8b775f}.illustration-backdrop{padding:18px;overflow:auto;align-items:flex-start}.illustration-dialog{max-width:min(960px,94vw);width:100%;max-height:90vh;overflow:auto;position:relative;border-radius:28px;padding:22px 20px 20px;background:#fffaf6}.illustration-layout{display:grid;grid-template-columns:minmax(240px,.95fr) minmax(0,1.05fr);gap:18px;margin-top:16px;align-items:start}.illustration-form{display:grid;gap:12px}.illustration-style-list{display:grid;gap:8px}.illustration-style-list .suggestion-chip{justify-items:start;text-align:left}.illustration-style-list .suggestion-chip strong{display:block}.illustration-style-list .suggestion-chip small{display:block;font-size:11px;color:#6f827a;margin-top:4px}.illustration-preview{display:grid;gap:12px;align-content:start}.illustration-preview-stage{position:relative;min-height:220px;border-radius:24px;background:linear-gradient(180deg,#fffefc,#fff6ef);border:1px solid #efe4d7;overflow:hidden}.illustration-preview img{display:block;width:100%;max-height:520px;object-fit:contain;background:linear-gradient(180deg,#fffefc,#fff6ef);border-radius:22px;border:1px solid #efe4d7;padding:10px}.illustration-preview-stage img{max-height:none;height:100%;min-height:220px;border:none;border-radius:0;padding:14px;background:transparent}.illustration-preview-stage.is-busy img{opacity:.25;filter:blur(1.4px) saturate(.82)}.illustration-loading{position:absolute;inset:0;display:grid;place-items:center;padding:18px;background:linear-gradient(180deg,rgba(255,252,247,.72),rgba(255,248,239,.88))}.illustration-loading-card{display:grid;justify-items:center;gap:10px;max-width:360px;text-align:center;padding:18px 18px 16px;border-radius:20px;background:rgba(255,255,255,.96);border:1px solid #eedfce;box-shadow:0 10px 28px #00000010}.illustration-loading-card strong{color:#9b623e;font-size:16px}.illustration-loading-card p{margin:0;color:#6b7b73;font-size:12px;line-height:1.65}.illustration-loading-spinner{width:58px;height:58px;border-radius:50%;border:4px solid #f0dac6;border-top-color:#d27a52;border-right-color:#9bc9a4;animation:illustration-spin .95s linear infinite;position:relative}.illustration-loading-spinner::after{content:"🍱";position:absolute;inset:0;display:grid;place-items:center;font-size:24px}.illustration-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.illustration-actions.preview{grid-template-columns:1fr 1fr}.illustration-actions button{white-space:normal}.suggestion-chip.selected{border-color:#d7825f;background:#fff3ec;box-shadow:0 4px 14px #eab4992e}.suggestion-chip.selected strong{color:#b06141}@keyframes illustration-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@media (max-width:760px){.illustration-layout{grid-template-columns:1fr}.illustration-actions,.illustration-actions.preview{grid-template-columns:1fr}.setting-stack{padding:12px 14px}.provider-note{margin-left:14px;margin-right:14px}}

/* v0.1.6: upload-photo AI illustration flow */
.illustration-source-switch{display:grid;grid-template-columns:1fr 1fr;gap:8px}.source-chip{border:1px solid #e2d9cf;background:#fff;border-radius:14px;padding:10px 12px;font:800 12px/1.3 inherit;color:#486257;cursor:pointer}.source-chip.selected{border-color:#d57e56;background:#fff1e8;color:#ab6345;box-shadow:0 4px 14px #eab4992e}.illustration-upload-panel{display:grid;gap:10px;padding:12px;border-radius:18px;border:1px dashed #e5d4c3;background:#fffdf8}.illustration-upload-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.illustration-upload-panel img{display:block;width:100%;max-height:220px;object-fit:contain;background:linear-gradient(180deg,#fffefc,#fff6ef);border:1px solid #efe4d7;border-radius:18px;padding:8px}.result-note-list{display:grid;gap:8px;padding:12px;border-radius:16px;border:1px solid #ece3d8;background:#fff9f3}.result-note-list li{color:#6b7c73;font-size:12px;line-height:1.6;margin-left:18px}
@media (max-width:620px){.illustration-source-switch,.illustration-upload-actions{grid-template-columns:1fr}.source-chip{padding:10px}.illustration-upload-panel img{max-height:180px}}

/* v0.1.6: title photo-flow + album illustration variants */
.home-mini-note{display:flex;gap:10px;align-items:flex-start;margin-top:14px;padding:12px 14px;border-radius:16px;background:#fff7ef;border:1px solid #f1dfcf;color:#6a786f;font-size:12px;line-height:1.5}.home-mini-note strong{color:#d1744b;letter-spacing:.08em}.album-card.has-illustration{position:relative}.album-card .album-ai-badge{position:absolute;top:10px;right:10px;z-index:2;background:#fff1e8;color:#bb6842;border:1px solid #efc7ab;border-radius:999px;padding:5px 8px;font-size:11px;font-weight:800;box-shadow:0 4px 12px #ce9a7f2e}.album-view-switch{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}.album-detail-photo img{display:block;width:100%;border-radius:24px;border:1px solid #ece2d8;background:#fffdf9;padding:6px}.album-detail-photo canvas[hidden],.album-detail-photo img[hidden]{display:none!important}
@media (max-width:620px){.home-mini-note{font-size:11px;padding:10px 12px}.album-view-switch{grid-template-columns:1fr}}

/* v0.1.7: rewarded cloud-generation prototype + unlimited offline filters */
.ai-reward-panel{display:grid;gap:8px;padding:14px;border-radius:16px;background:#fff8e9;border:1px solid #efd8a8;color:#645d4b}
.ai-reward-panel strong{font-size:13px;color:#a96d32}
.ai-reward-panel p{font-size:12px;line-height:1.5;margin:0}
.ai-reward-panel small{font-size:10px;line-height:1.5;color:#897967}
.ai-reward-panel button{white-space:normal}
.ai-reward-panel[hidden]{display:none!important}

.modal-status-tools{display:grid;gap:10px;margin-top:12px}
.modal-status-tools .btn{justify-self:start}

/* v0.1.10: explicit reward lifecycle, strong visual feedback, mobile stacking */
.ai-reward-visual{display:flex;align-items:center;gap:12px;background:#fff;border:2px solid #e8d4bc;border-radius:16px;padding:10px 12px;min-height:66px}
.ai-reward-visual .ai-reward-icon{display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;border-radius:12px;background:#fff3dd;font-size:25px}
.ai-reward-visual strong{display:block;font-size:15px!important;color:#765232!important}
.ai-reward-visual small{display:block;margin-top:3px;font-size:11px!important;color:#706d62!important}
.ai-reward-panel[data-reward-state="ready"]{border:2px solid #54a98b;background:#f0fff6}
.ai-reward-panel[data-reward-state="ready"] .ai-reward-visual{border-color:#8dc4ab;background:#e3f8ed}
.ai-reward-panel[data-reward-state="ready"] .ai-reward-icon{background:#c9eed8}
.ai-reward-panel[data-reward-state="playing"]{border-color:#e4aa65;background:#fff4d7}
.ai-reward-panel[data-reward-state="playing"] .ai-reward-icon{animation:reward-pulse .6s ease-in-out infinite alternate}
.ai-reward-panel[data-reward-state="used"]{background:#f5f3ef;border-color:#ddd8d0}
.ai-reward-panel .btn:not(:disabled){border:2px solid #bd9b63}
@keyframes reward-pulse{from{transform:scale(.95);opacity:.55}to{transform:scale(1.12);opacity:1}}
@media(prefers-reduced-motion:reduce){.ai-reward-panel[data-reward-state="playing"] .ai-reward-icon,.illustration-loading-spinner{animation:none}}
@media(max-width:620px){.illustration-dialog{padding:16px 12px;max-width:96vw}.illustration-form{gap:10px}.ai-reward-panel{padding:10px}}

/* v0.1.12: do not let class display rules override the HTML hidden attribute. */
.illustration-loading[hidden],
.illustration-placeholder[hidden],
.illustration-preview-stage img[hidden],
.ai-reward-dev-tools[hidden] { display: none !important; }
.illustration-placeholder {
  min-height: 260px;
  padding: 32px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  color: #4b6559;
}
.illustration-placeholder-icon {
  font-size: 48px;
  padding: 16px;
  width: 90px;
  height: 90px;
  display: grid;
  place-items: center;
  background: #fff4e3;
  border: 1px dashed #e9d7c1;
  border-radius: 24px;
}
.illustration-placeholder strong { font-size: 16px; line-height: 1.55; }
.illustration-placeholder p { color: #7d8982; font-size: 12px; line-height: 1.7; margin: 0; }
.ai-reward-dev-tools {
  display: grid;
  gap: 6px;
  border-top: 1px dashed #dbbfa1;
  padding-top: 9px;
}
.ai-reward-dev-tools .btn { border: 1px solid #d6b99c; white-space: normal; color: #875b3d; }
.ai-reward-dev-tools small { font-size: 10px; }
@media (max-width: 620px) {
  .illustration-placeholder { min-height: 220px; padding: 26px 14px; }
}

/* v0.1.15: sticky completion confirmation inside the scrollable AI dialog. */
.illustration-complete-notice[hidden]{display:none!important}
.illustration-complete-notice{position:sticky;top:0;z-index:4;display:flex;align-items:center;gap:10px;padding:12px;margin:0 0 8px;border:2px solid #a6d1b5;border-radius:16px;background:#e9f9ed;color:#2d6349;box-shadow:0 6px 22px #2b60442a;text-align:left}
.illustration-complete-icon{font-size:24px}.illustration-complete-copy{display:grid;gap:3px;flex:1;min-width:0}.illustration-complete-copy strong{font-size:14px}.illustration-complete-copy small{font-size:11px;line-height:1.5}.illustration-complete-notice .btn{min-height:36px;padding:7px 10px;font-size:11px;white-space:normal}
.illustration-complete-close{border:0;background:transparent;color:#50725d;font-size:22px;min-height:32px;min-width:32px;padding:0}
@media(max-width:560px){.illustration-complete-notice{flex-wrap:wrap;gap:7px;padding:10px}.illustration-complete-copy{flex-basis:calc(100% - 90px)}.illustration-complete-notice .btn{flex:1}}

/* v0.1.17 Reference inspection and download: independent of AI generation. */
.ai-reference-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.ai-reference-actions[hidden]{display:none!important}.ai-reference-actions .btn{min-width:0;font-size:12px;white-space:normal;padding:9px 7px}.ai-reference-backdrop{z-index:55;overflow:auto;padding:12px}.ai-reference-dialog{background:#fffaf4;border-radius:22px;box-shadow:0 18px 60px #102d2360;padding:15px;max-width:min(690px,100%);max-height:94dvh;overflow:auto;text-align:center}.ai-reference-head{display:flex;align-items:center;justify-content:space-between;gap:8px;color:#275044;font-size:15px}.ai-reference-dialog img{display:block;width:min(100%,520px);max-height:65dvh;object-fit:contain;margin:10px auto;border:1px solid #ede2d5;border-radius:13px;background:#f8f0e6}.ai-reference-dialog p{font-size:12px;line-height:1.6;color:#6b7d72;margin:7px auto 12px;max-width:520px}@media(max-width:560px){.ai-reference-actions{grid-template-columns:1fr}.ai-reference-dialog{padding:10px}.ai-reference-head{font-size:12px}.ai-reference-dialog img{max-height:58dvh}}

/* v0.1.19: readable desktop studio + mobile reference/result tabs and persistent CTAs */
.illustration-dialog{max-width:min(1120px,96vw);max-height:92dvh;overflow:auto;overscroll-behavior:contain}
.illustration-layout{grid-template-columns:minmax(310px, .88fr) minmax(360px,1.12fr);gap:20px}
.illustration-form,.illustration-preview{min-width:0}
.illustration-source-switch{grid-template-columns:1fr 1fr}
.illustration-source-switch .source-chip{min-height:44px}
.illustration-upload-panel img{max-height:300px}
.illustration-preview-stage{aspect-ratio:1/1;display:grid;align-items:center}
.illustration-preview-stage img{max-height:100%;height:auto;min-height:0;object-fit:contain}
.illustration-preview-stage .illustration-placeholder{min-height:220px}
.illustration-mobile-tabs,.illustration-mobile-footer{display:none}
.ai-ingredient-details{border:1px solid #e9ddc8;border-radius:18px;background:#fffefb;padding:10px 12px;margin:2px 0}
.ai-ingredient-details[hidden]{display:none!important}
.ai-ingredient-details summary{cursor:pointer;min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px;font-weight:850;color:#365c50;list-style:none}
.ai-ingredient-details summary::-webkit-details-marker{display:none}
.ai-ingredient-details summary::after{content:'⌄';color:#b87d5e}
.ai-ingredient-details[open] summary::after{content:'⌃'}
.ai-ingredient-list{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:9px 0 12px}
.ai-ingredient-chip{display:flex;align-items:center;gap:7px;min-width:0;padding:7px;border:1px solid #eee5d8;background:#fffaf2;border-radius:12px}
.ai-ingredient-chip img{height:46px;width:46px;object-fit:contain;flex:none}
.ai-ingredient-chip span{min-width:0;display:grid;gap:1px}
.ai-ingredient-chip strong{font-size:11px;color:#33584d}
.ai-ingredient-chip small{font-size:10px;color:#90654b}
.ai-legend-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.ai-legend-actions .btn{font-size:11px;min-height:42px}
#aiLegendPreview{width:100%;max-height:300px;object-fit:contain;border:1px solid #eaded2;border-radius:12px;background:#fff;margin:10px 0}
#aiLegendPreview[hidden]{display:none!important}
.ai-legend-note{margin:8px 2px;font-size:10px;line-height:1.6;color:#7c8a81}
@media(max-width:760px){
 .illustration-backdrop{padding:0;align-items:stretch;overflow:hidden}
 .illustration-dialog{max-width:100vw;width:100%;height:100dvh;max-height:100dvh;border-radius:0;padding:12px 14px 92px;overflow:auto;scrollbar-gutter:stable}
 .illustration-layout{display:block;margin-top:10px}
 .illustration-layout[data-mobile-view="reference"] .illustration-preview{display:none}
 .illustration-layout[data-mobile-view="output"] .illustration-form{display:none}
 .illustration-mobile-tabs{display:grid;grid-template-columns:1fr 1fr;gap:7px;position:sticky;top:-12px;z-index:6;background:#fffaf6;padding:9px 0 8px;margin-top:8px;border-bottom:1px solid #ede2d4}
 .illustration-mobile-tabs button{background:#fff;min-height:44px;border-radius:13px;border:1px solid #e3d8c9;color:#587467;font-size:13px;font-weight:800}
 .illustration-mobile-tabs button.selected{background:#e5f3e8;border-color:#95bda2;color:#2c6550}
 .illustration-mobile-footer{display:grid;grid-template-columns:minmax(92px,1fr) minmax(75px,.75fr) minmax(135px,1.2fr);gap:6px;align-items:center;position:sticky;bottom:-92px;left:0;right:0;z-index:7;background:rgba(255,250,246,.98);border-top:1px solid #ead9c9;padding:10px 1px max(12px,env(safe-area-inset-bottom));box-shadow:0 -6px 20px #2b4a2820}
 .illustration-mobile-footer .btn{padding:9px 6px;min-height:45px;font-size:11px;white-space:normal}
 .illustration-mobile-footer span{color:#39634f;font-size:11px;font-weight:800}
 .illustration-form>.illustration-actions{display:none}
 .illustration-style-list{grid-template-columns:1fr 1fr;gap:7px}
 .illustration-style-list .suggestion-chip{min-height:64px;padding:8px}
 .illustration-upload-panel img{max-height:230px}
 .illustration-preview-stage{min-height:260px;max-height:calc(100dvh - 290px)}
 .illustration-complete-notice{top:40px}
}
@media(max-width:460px){
 .illustration-dialog{padding:10px 11px 90px}
 .illustration-source-switch,.illustration-upload-actions{grid-template-columns:1fr 1fr}
 .illustration-source-switch .source-chip{font-size:11px;padding:9px 4px}
 .ai-ingredient-list{grid-template-columns:1fr 1fr}
 .ai-ingredient-chip img{height:38px;width:38px}
 .ai-ingredient-chip{gap:4px;padding:5px}
}
@media(max-width:920px) and (orientation:landscape) and (max-height:460px){
 .illustration-dialog{padding-top:6px}
 .illustration-mobile-tabs{top:-6px;padding:5px 0}
 .illustration-dialog .album-detail-head p{display:none}
 .illustration-preview-stage{max-height:calc(100dvh - 170px);min-height:170px}
 .illustration-mobile-footer{padding:5px 1px max(5px,env(safe-area-inset-bottom))}
}
@media(max-width:760px){.illustration-mobile-footer{bottom:0}}

/* v0.1.19 compact input selection and first-screen desktop CTA */
.illustration-upload-panel[data-mode="board"] .illustration-upload-actions{display:none}
.illustration-quick-generate{width:100%;min-height:48px;position:sticky;top:0;z-index:2;box-shadow:0 5px 12px #c36e4a1c}
@media(max-width:760px){.illustration-quick-generate{display:none}}

/* v0.1.20: two explicit reference packing modes; no extra mobile scrolling. */
.ai-reference-layout-choices{display:grid;gap:7px;padding:9px 10px;background:#f7f9f3;border:1px solid #e3ebd9;border-radius:14px}
.ai-reference-layout-choices[hidden]{display:none!important}
.ai-reference-layout-choices>span{font-size:12px;font-weight:850;color:#2c594c}
.ai-reference-layout-choices>small{font-size:10px;color:#687e70;line-height:1.6}
.ai-reference-layout-buttons{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.ai-reference-layout-buttons button{min-height:42px;padding:8px 5px;font-size:11px;white-space:normal}
@media (max-width:420px){.ai-reference-layout-buttons button{font-size:10px;min-height:44px}}

/* v0.1.22 — direct provider selection and safe A/B preview */
.ai-provider-switch{background:#f5f8f3;border:1px solid #d8e4d5;border-radius:16px;padding:12px;display:grid;gap:7px}
.ai-provider-switch label{font-size:13px;font-weight:850;color:#31574b}
.ai-provider-switch-row{display:flex;gap:8px;align-items:center}
.ai-provider-switch select{flex:1;min-width:0;padding:10px;border:1px solid #c9dccb;border-radius:11px;background:#fffefa;color:#2d584a;font:inherit;font-size:13px}
.ai-provider-switch-row button{font-size:12px;padding:9px 12px;white-space:nowrap}
.ai-provider-switch p,.ai-provider-switch small{margin:0;color:#688074;font-size:11px;line-height:1.5}
.ai-provider-switch [data-status="ready"]{color:#23704d;font-weight:750}
.ai-provider-switch [data-status="off"]{color:#af5c3b;font-weight:750}
.ai-comparison-panel{padding:12px;background:#fff7ec;border:1px solid #eadbc6;border-radius:15px;display:grid;gap:7px}
.ai-comparison-panel[hidden]{display:none!important}
.ai-comparison-panel>strong{font-size:13px;color:#3f5749}
.ai-comparison-panel>p{font-size:11px;margin:0;color:#7b8178}
.ai-comparison-images{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.ai-comparison-images figure{margin:0;min-width:0}
.ai-comparison-images img{width:100%;aspect-ratio:1;object-fit:contain;background:#fff;border:1px solid #e1d4c1;border-radius:10px}
.ai-comparison-images figcaption{font-size:11px;font-weight:800;color:#4a6a55;text-align:center}
@media(max-width:760px){.ai-provider-switch-row select{font-size:12px}.ai-provider-switch-row button{font-size:11px}}

.ai-legend-send-choice{display:flex;align-items:start;gap:8px;margin-top:12px;font-size:12px;color:#567061;line-height:1.6}.ai-legend-send-choice[hidden]{display:none!important}.ai-legend-send-choice input{margin-top:3px}

/* v0.1.23 developer-only AI input diagnostics; hidden by default. */
.ai-dev-reference-tools[hidden]{display:none!important}
.ai-dev-reference-tools{display:grid;gap:9px;margin:10px 0;padding:12px;border-radius:14px;border:1px dashed #bb9776;background:#fff6ea;color:#4d5e50;font-size:12px}
.ai-dev-reference-tools>small,.ai-dev-reference-tools details small{font-size:11px;line-height:1.5}
.ai-dev-reference-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.ai-dev-reference-actions .btn{min-height:42px;font-size:11px;white-space:normal;padding:8px 5px}
.ai-dev-optin{display:flex;align-items:center;gap:10px;border-radius:10px;padding:10px;background:#fff;line-height:1.5}
.ai-dev-optin input{min-width:20px;min-height:20px;flex:none}
.ai-dev-reference-tools details{padding:8px;border-radius:10px;background:#fff}
.ai-dev-reference-tools summary{cursor:pointer;font-weight:750}
.ai-dev-reference-tools pre{max-height:200px;overflow:auto;font-family:ui-monospace,monospace;white-space:pre-wrap;overflow-wrap:anywhere;font-size:11px;line-height:1.5;color:#42584d}

/* v0.1.24 — clearer score feedback and collectible stickers, no rule changes. */
.controls-column{position:relative}
.score-insight{position:relative;z-index:4;font-size:11px;color:#346b58;margin:0 1px 2px}
.score-insight summary{cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:7px;min-height:27px;border-radius:9px;padding:5px 9px;background:#ecf5e9;border:1px solid #d3e9d6;font-weight:800;list-style:none}
.score-insight summary::-webkit-details-marker{display:none}
.score-insight summary:focus-visible{outline:2px solid #256e5f}
.score-insight .insight-arrow{font-size:10px;color:#698476;white-space:nowrap}
.score-insight-popup{position:absolute;right:0;top:100%;width:min(360px,94vw);background:#fffdf8;border:1px solid #d6e5d2;border-radius:14px;padding:12px;box-shadow:0 12px 30px #374b3930;z-index:15;line-height:1.7}
.score-insight-popup strong,.score-insight-popup .insight-subhead{display:block;margin-bottom:4px}
.score-insight-popup .insight-subhead{margin-top:7px;color:#a17d58;font-weight:800}
.insight-combo{display:inline-block;background:#e4f3e9;color:#23664c;border-radius:6px;padding:1px 6px;margin:2px;font-size:10px}
.home-stickers{max-width:520px;border:1px solid #e7e8d7;border-radius:14px;padding:11px 12px;margin:14px 0 10px;background:#fffdf9;box-shadow:0 4px 14px #9f855014}
.home-stickers-head{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:#336456;margin-bottom:8px}
.home-stickers-head span{font-variant-numeric:tabular-nums;font-weight:900}
.sticker-mini-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.sticker-mini{display:flex;align-items:center;gap:5px;border-radius:9px;padding:6px 5px;border:1px solid #dfe8d8;background:#eef7eb;font-weight:800;font-size:10px;color:#2e715b;min-width:0}
.sticker-mini b{font-size:18px;line-height:1;flex:0 0 auto}.sticker-mini span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sticker-mini.locked{background:#f6f2e9;border-color:#e9e4d9;color:#aaa89d}.sticker-mini.locked b{filter:grayscale(1);opacity:.42}
.home-stickers>small{display:block;color:#879287;font-size:10px;margin-top:7px}
.result-sticker-box{margin:11px 0;background:#fff7dc;border:1px solid #f3dfab;border-radius:12px;padding:11px 12px;font-size:12px;color:#6d5f38;display:grid;gap:8px}
.result-sticker-box>div{display:flex;gap:5px;flex-wrap:wrap}.result-sticker-box small{font-size:10px;line-height:1.5}
.result-sticker{padding:6px 9px;border-radius:9px;background:#fffefa;border:1px solid #efdaa4;font-weight:800}
.result-next-tip{font-size:12px;color:#547262;background:#eff7ef;border:1px solid #dbe9d9;border-radius:11px;padding:10px;line-height:1.6;margin:10px 0}
.result-actions button[data-action="fresh"]{grid-column:1/-1}
@media(max-width:420px){.home-stickers{padding:9px}.sticker-mini{font-size:9px;padding:5px 4px}.sticker-mini b{font-size:15px}.score-insight summary{font-size:10px;padding:4px 7px;min-height:24px}}
@media(max-height:460px) and (orientation:landscape){.score-insight summary{min-height:21px;padding:2px 8px;font-size:10px}.score-insight{margin-bottom:0}}

/* v0.1.25 — six collectible die-cut stickers and a compact bonus challenge panel. */
.sticker-mini-grid{gap:8px}
.sticker-mini{appearance:none;min-height:102px;display:flex;flex-direction:column;gap:3px;align-items:center;justify-content:center;padding:5px 4px;border-radius:13px;cursor:pointer;background:linear-gradient(160deg,#fffdf6,#edf7e9);border:1px solid #e5e8d8;color:#305f52;font:800 10px/1.25 inherit;text-align:center;transition:transform .14s,box-shadow .14s}
.sticker-mini:hover,.sticker-mini:focus-visible{transform:translateY(-2px);box-shadow:0 5px 13px #976c3b29}
.sticker-mini img{width:72px;height:72px;object-fit:contain;filter:drop-shadow(0 2px 1px #81603625)}
.sticker-mini span{max-width:100%;white-space:normal;line-height:1.3;overflow:visible;text-overflow:initial}
.sticker-mini.locked img{filter:grayscale(1);opacity:.32}
.sticker-mini.locked{background:#f7f4ef;color:#aaa49c}
.sticker-detail-dialog{border:1px solid #f3dfc8;max-width:min(350px,calc(100vw - 30px));width:100%;border-radius:24px;padding:25px 20px;background:#fffaf0;text-align:center;box-shadow:0 20px 60px #413b3b36;color:#34594d}
.sticker-detail-dialog::backdrop{background:#263d3396}
.sticker-detail-dialog img{display:block;width:min(210px,60vw);height:auto;margin:0 auto 5px;filter:drop-shadow(0 9px 7px #a07c6147)}
.sticker-detail-dialog img.locked{filter:grayscale(1);opacity:.42}
.sticker-detail-dialog h3{font-size:20px;margin:10px auto 7px}
.sticker-detail-dialog p{line-height:1.8;font-size:13px;margin:0 0 15px}
.sticker-detail-dialog .btn{width:100%}
.sticker-modal-close{position:absolute;top:12px;right:14px;border:0;background:#f7ebde;width:32px;height:32px;border-radius:50%;font-size:21px;cursor:pointer}
.result-sticker{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:110px;max-width:160px;text-align:center;background:#fffdf6}
.result-sticker img{width:95px;height:95px;object-fit:contain;filter:drop-shadow(0 3px 2px #b77e3942)}
.result-sticker span{font-size:12px}
.sticker-new-unlock{border-color:#ebbe68;background:linear-gradient(125deg,#fff6d5,#fffdf6 55%,#fff3d6);box-shadow:0 0 22px #f9ca6942}
.sticker-new-unlock .result-sticker img{animation:stickerPop .6s cubic-bezier(.17,1.4,.45,1) both}
@keyframes stickerPop{0%{transform:scale(.65) rotate(-9deg);opacity:.3}65%{transform:scale(1.12) rotate(4deg);opacity:1}100%{transform:scale(1) rotate(0deg)}}
.result-challenge-box{background:#f5f9ed;border:1px solid #d5e5d1;border-radius:13px;padding:12px;display:grid;gap:8px;font-size:12px;color:#375e4b;margin:10px 0}
.result-challenge-box>div{display:flex;gap:6px;flex-wrap:wrap}
.result-challenge-box small{font-size:11px;color:#718b79}
.challenge-result{font-size:11px;padding:6px 8px;border-radius:8px;background:#f3f0e6;color:#938c77;font-weight:750}
.challenge-result.done{background:#dcf0da;color:#278257}
.customer-avatar{border:2px solid #fff7ec;box-shadow:0 0 0 1px #e9daca;background:#ffeedd}
.customer-avatar img{width:100%;height:100%;object-fit:contain;border-radius:inherit;pointer-events:none}
.customer-tip{display:block;font-size:10px;line-height:1.4;color:#9a836c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.challenge-panel{position:relative;z-index:4;margin:2px 1px 2px;color:#44694f;font-size:11px}
.challenge-panel>summary{cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:5px 9px;border:1px solid #e5e1c7;border-radius:9px;min-height:27px;background:#fff7dd;list-style:none;font-weight:800}
.challenge-panel>summary::-webkit-details-marker{display:none}
.challenge-panel>summary:focus-visible{outline:2px solid #348b68}
.challenge-details{position:absolute;right:0;top:calc(100% + 4px);width:min(345px,94vw);max-height:min(310px,55dvh);overflow:auto;background:#fffdf6;border:1px solid #e6dcbd;border-radius:15px;padding:10px;z-index:15;box-shadow:0 12px 28px #564b322b;display:grid;gap:7px}
.challenge-goal{display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:7px;background:#f7f4ec;border-radius:10px;padding:7px}
.challenge-goal-icon{font-size:21px;text-align:center}
.challenge-goal strong,.challenge-goal small{display:block;line-height:1.45}
.challenge-goal strong{font-size:12px}
.challenge-goal small{font-size:10px;color:#918673}
.challenge-goal b{font-size:10px;color:#ae8458;white-space:nowrap}
.challenge-goal.done{background:#e9f6e6}.challenge-goal.done b{color:#3c9869}
/* The old global suggestion-chip used pill radii; illustrated style cards need a readable rectangle. */
.illustration-style-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.illustration-style-list .style-card{box-sizing:border-box;width:100%;min-width:0;min-height:79px;display:flex;align-items:center;position:relative;text-align:left;justify-content:flex-start;gap:9px;padding:10px;border-radius:15px;border:1.5px solid #e9d9c9;background:#fffefb;box-shadow:none;white-space:normal}
.illustration-style-list .style-card.selected{background:#fff6ef;border:2px solid #dd825c;box-shadow:0 0 0 2px #fce9db inset}
.illustration-style-list .style-card .style-art{width:42px;height:42px;flex:0 0 42px;border-radius:12px;border:2px solid #fffcf7;box-shadow:0 2px 5px #69513719;background:radial-gradient(circle at 58% 39%,#f0ad72 0 19%,transparent 21%),radial-gradient(circle at 28% 64%,#81b68a 0 20%,transparent 22%),linear-gradient(130deg,#ffecb4,#f4c4b5)}
.illustration-style-list .style-card--poster .style-art{background:radial-gradient(circle at 70% 20%,#e36148 0 18%,transparent 20%),linear-gradient(45deg,transparent 44%,#ffe08b 45% 54%,transparent 55%),repeating-linear-gradient(-30deg,#e58b68 0 6px,#f5ca8c 6px 12px)}
.illustration-style-list .style-card--watercolor .style-art{background:radial-gradient(ellipse at 68% 40%,#eca49caa 0 28%,transparent 65%),radial-gradient(ellipse at 20% 70%,#94bda9bb 0 31%,transparent 69%),#f9eaf1}
.illustration-style-list .style-card--photo .style-art{background:radial-gradient(circle at 70% 30%,#e45640 0 16%,transparent 17%),radial-gradient(ellipse at 28% 64%,#3c9650 0 33%,transparent 38%),linear-gradient(120deg,#dba26d,#f9e4c0)}
.illustration-style-list .style-card .style-text{display:block;min-width:0;flex:1}
.illustration-style-list .style-card strong{font-size:13px;color:#36564a;white-space:normal;line-height:1.25}
.illustration-style-list .style-card small{font-size:10px;line-height:1.35;white-space:normal;color:#7b8b7d;margin-top:4px}
.illustration-style-list .style-card .style-check{position:absolute;right:6px;top:5px;color:#d67852;font-size:12px;font-weight:900}
@media(max-width:760px){
 .customer-tip{font-size:9px}
 .illustration-style-list .style-card{min-height:69px;padding:7px;gap:6px;border-radius:12px}
 .illustration-style-list .style-card .style-art{width:36px;height:36px;flex-basis:36px;border-radius:10px}
 .illustration-style-list .style-card strong{font-size:12px}
 .illustration-style-list .style-card small{font-size:9px}
}
@media(max-width:390px){.customer-tip{display:none}.challenge-panel summary{min-height:23px;padding:3px 6px;font-size:10px}.sticker-mini{min-height:84px;font-size:9px}.sticker-mini img{width:54px;height:54px}}
@media(orientation:landscape) and (max-height:590px){.customer-tip{display:none}.challenge-panel summary{min-height:21px;padding:2px 7px;font-size:10px}.challenge-panel{margin:0}.challenge-details{max-height:65dvh}}
@media(prefers-reduced-motion:reduce){.sticker-new-unlock .result-sticker img{animation:none}}
.reduced-motion .sticker-new-unlock .result-sticker img{animation:none}

/* v0.1.26: friendly anime cast, daily themes, earned bonds and sticker celebration. */
.home-daily-spotlight,.home-friendship{max-width:520px;border:1px solid #e8dec9;border-radius:16px;margin:12px 0;background:#fffdfa;box-shadow:0 4px 13px #886c4220;color:#366351}
.home-daily-spotlight{display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:9px;padding:12px}
.daily-home-icon{width:44px;height:44px;border-radius:13px;background:#fff0d6;display:grid;place-items:center;font-size:26px}
.home-daily-spotlight strong,.home-daily-spotlight small{display:block;line-height:1.6}
.home-daily-spotlight strong{font-size:12px}
.home-daily-spotlight small{font-size:10px;color:#837a66}
.home-daily-spotlight button{border:1px solid #e9b994;border-radius:10px;background:#fef0db;color:#b7613f;min-height:42px;padding:7px;font-size:11px;font-weight:900;cursor:pointer}
.home-friendship{padding:12px}
.home-friendship-head{display:flex;align-items:center;justify-content:space-between;gap:7px;margin-bottom:10px}
.home-friendship-head strong{font-size:13px}
.home-friendship-head small{font-size:10px;color:#8d8e76}
.friendship-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.friendship-card{border:1px solid #eadbd7;border-radius:14px;background:linear-gradient(160deg,#fff7fb,#fffef9);display:flex;align-items:center;flex-direction:column;gap:5px;padding:9px 5px;color:#3f6655;text-align:center;cursor:pointer;min-width:0;transition:box-shadow .15s,transform .15s}
.friendship-card:hover,.friendship-card:focus-visible{box-shadow:0 6px 14px #8e7f5a28;transform:translateY(-2px)}
.friendship-card img{width:min(92px,100%);height:82px;object-fit:cover;border-radius:12px;border:3px solid #fff;box-shadow:0 2px 7px #7e674b25}
.friendship-body{display:block;width:100%;min-width:0}
.friendship-body>strong,.friendship-body>small{display:block;line-height:1.5}
.friendship-body>strong{font-size:12px;white-space:nowrap}
.friendship-body>strong small{font-size:10px;color:#d46f79}
.friendship-body>small{font-size:9px;color:#8f8a7e}
.affection-track{display:block;position:relative;width:100%;height:7px;background:#f1e9e5;border-radius:999px;overflow:hidden;margin:6px 0}
.affection-track>span{display:block;height:100%;background:linear-gradient(90deg,#ffc19d,#ec789d);border-radius:999px;transition:width .3s}
.sticker-master-link{border:0;border-radius:9px;background:#fff0be;color:#aa7140;font-weight:900;font-size:11px;padding:5px 8px;cursor:pointer}
.daily-theme-banner{border:1px solid #d3e7b7;border-radius:9px;background:#f1f8e4;color:#4c755b;font-weight:850;font-size:10px;padding:5px 8px;margin:2px 0}
.daily-theme-banner[hidden]{display:none}
.result-friendship-box{display:flex;align-items:center;gap:12px;background:linear-gradient(115deg,#fff3f5,#fefbf1);border:1px solid #f3d9dd;border-radius:14px;padding:10px 12px;margin:10px 0;color:#9d5970}
.result-friendship-box img{width:59px;height:59px;border-radius:12px;object-fit:cover;flex-shrink:0}
.result-friendship-box strong,.result-friendship-box small{display:block;line-height:1.6}
.result-friendship-box strong{font-size:12px}.result-friendship-box small{font-size:11px;color:#856f74}
.friendship-dialog,.sticker-complete-dialog{position:fixed;max-width:min(420px,calc(100vw - 24px));width:100%;max-height:90dvh;overflow:auto;text-align:center;border:1px solid #ecdad0;border-radius:25px;background:linear-gradient(#fffafa,#fff7e9);box-shadow:0 18px 65px #27271b45;padding:20px;color:#3b6554}
.friendship-dialog::backdrop,.sticker-complete-dialog::backdrop{background:#253934a6}
.friendship-dialog-portrait{width:130px;height:130px;object-fit:cover;border-radius:24px;border:5px solid #fff3e9;box-shadow:0 5px 12px #85684924}
.friendship-dialog h3{font-size:19px;margin:12px 0 5px}
.friendship-dialog p{font-size:12px;line-height:1.75;margin:10px 0}
.friendship-dialog>.affection-track{height:11px;max-width:290px;margin:15px auto}
.friendship-dialog .btn{width:100%;margin-top:12px}
.sticker-complete-dialog{border:3px solid #ffdb8e;background:radial-gradient(circle at 50% 24%,#fff1d2,#fffaf3 54%,#fff4e6);padding:23px 20px;overflow:hidden}
.sticker-complete-dialog h2{font-size:clamp(18px,5vw,26px);margin:0 0 5px;color:#d26e3c}
.sticker-complete-dialog p{font-size:12px;color:#846e54;margin:7px}
.sticker-complete-dialog .complete-crown{font-size:48px;display:block;filter:drop-shadow(0 5px 7px #fbd280)}
.complete-bursts{pointer-events:none;position:absolute;inset:10px 0 auto;color:#ffaf69;letter-spacing:15px;white-space:nowrap;animation:completionSparkle 2s ease-in-out infinite alternate}
@keyframes completionSparkle{from{opacity:.5;transform:translateY(7px) scale(.96)}to{opacity:1;transform:translateY(-4px) scale(1.05)}}
.sticker-complete-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:16px auto;max-width:320px}
.sticker-complete-grid img{display:block;width:100%;height:auto;max-height:102px;object-fit:contain;filter:drop-shadow(0 4px 3px #b98c4d42);animation:stickerPop .5s both}
.sticker-complete-grid img:nth-child(2){animation-delay:.1s}.sticker-complete-grid img:nth-child(3){animation-delay:.2s}.sticker-complete-grid img:nth-child(4){animation-delay:.3s}.sticker-complete-grid img:nth-child(5){animation-delay:.4s}.sticker-complete-grid img:nth-child(6){animation-delay:.5s}
.complete-title-label{display:block;margin:12px 0;padding:10px;border-radius:12px;background:#fff0b9;color:#b66e32;font-size:14px}
.sticker-complete-dialog .btn{width:100%}.master-result-btn{border:1px solid #d9b365;border-radius:10px;background:#fff3c7;color:#a57235;padding:9px;font-weight:900;cursor:pointer}
@media(max-width:420px){.friendship-grid{gap:5px}.friendship-card{padding:6px 3px}.friendship-card img{width:64px;height:64px}.home-daily-spotlight{padding:8px;grid-template-columns:36px minmax(0,1fr) auto}.daily-home-icon{width:36px;height:36px;font-size:19px}.home-daily-spotlight button{font-size:10px;padding:5px}.home-daily-spotlight strong{font-size:11px}.home-friendship-head{align-items:flex-start;flex-direction:column;gap:2px}}
@media(max-height:460px) and (orientation:landscape){.daily-theme-banner{position:absolute;top:-28px;left:10px;margin:0;padding:3px 7px;font-size:9px}.challenge-panel{position:relative}}
@media(prefers-reduced-motion:reduce){.complete-bursts,.sticker-complete-grid img{animation:none}}
.reduced-motion .complete-bursts,.reduced-motion .sticker-complete-grid img{animation:none}

/* v0.1.27: large customer portraits and earned letters. The active puzzle remains one-screen. */
.friendship-card{padding:12px 7px;gap:8px}
.friendship-card img{width:min(148px,100%);height:145px;object-fit:cover;border-radius:20px;border:4px solid #fff;box-shadow:0 5px 13px #805b4930}
.friendship-body>strong{font-size:14px}.friendship-body>small{font-size:11px}
.friendship-dialog{max-width:min(460px,calc(100vw - 20px));padding:20px 18px}
.friendship-dialog-portrait{width:min(230px,72vw);height:min(230px,72vw);border-radius:29px;object-fit:cover}
.friendship-letters{margin-top:16px;padding-top:12px;border-top:1px dashed #edcdd0;text-align:left}
.friendship-letters-title{font-size:14px}
.friendship-letter{display:flex;gap:10px;align-items:flex-start;border:1px solid #edd9c5;border-radius:14px;padding:11px;margin-top:9px;background:#fffaf4}
.friendship-letter.locked{background:#f8f4ee;color:#978b82}
.friendship-letter-icon{display:grid;place-items:center;flex:0 0 38px;width:38px;height:38px;border-radius:50%;background:#ffecd9;font-size:21px}
.friendship-letter strong{font-size:12px}.friendship-letter p{margin:4px 0 0;font-size:11px;line-height:1.65}
.customer-avatar{flex:0 0 66px;width:66px;height:66px;border-radius:18px;padding:0;overflow:hidden;cursor:pointer}
.customer-avatar img{object-fit:cover}
.mission-bar{min-height:78px}
.result-friendship-box img{width:96px;height:96px;border-radius:19px}
.daily-journal{border:1px solid #d9e7d9;border-radius:16px;background:#f8fff9;padding:12px;margin-top:12px;color:#385f4e}
.daily-journal-heading{display:flex;justify-content:space-between;align-items:center;gap:8px}
.daily-journal-heading strong{font-size:13px}.daily-journal-heading span{font-size:11px;color:#648c76;font-weight:800}
.daily-journal-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;margin:11px 0 8px}
.journal-day{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:#f1f1e8;border:1px solid #e1e9db;border-radius:11px;min-width:0;padding:7px 0;color:#abb4a1}
.journal-day small{font-size:10px;white-space:nowrap}.journal-day strong{font-size:19px;line-height:1.2}
.journal-day.delivered{background:#dff1dc;border-color:#b1daba;color:#357b55}
.journal-day.today{outline:2px solid #eda275;outline-offset:1px}
.daily-journal>p{font-size:12px;font-weight:900;margin:4px 0 5px}
.daily-journal>small{font-size:10px;color:#75917b;line-height:1.5;display:block}
.daily-result-note{border-radius:10px;background:#eaf7e9;padding:8px;font-size:12px;color:#307a57;font-weight:900}
@media(min-width:760px) and (min-height:590px){
 .customer-avatar{width:82px;height:82px;flex-basis:82px;border-radius:23px}
 .mission-bar{min-height:100px}
}
/* At mobile width, three portraits cannot each be doubled in a fixed three-column grid.
   One-row swipeable portrait cards keep each face around twice its former 64px size. */
@media(max-width:760px){
 .friendship-grid{display:flex;gap:10px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;padding:3px 3px 11px;scrollbar-width:thin}
 .friendship-card{flex:0 0 174px;min-width:174px;max-width:174px;scroll-snap-align:start;padding:10px 9px}
 .friendship-card img{width:124px;height:124px;border-radius:19px}
 .customer-avatar{flex-basis:62px;width:62px;height:62px;border-radius:17px}
 .mission-bar{min-height:72px;padding:4px 9px}
 .result-friendship-box img{width:85px;height:85px}
}
@media(max-width:390px){
 .friendship-card{flex-basis:160px;min-width:160px;max-width:160px;padding:9px 6px}
 .friendship-card img{width:120px;height:120px}
 .customer-avatar{flex-basis:59px;width:59px;height:59px}
 .mission-bar{min-height:66px;padding:3px 6px}
 .score-pill{min-width:68px;padding:4px 5px}
 .mission-main strong{font-size:12px}
 .journal-day{padding:5px 0}.journal-day strong{font-size:17px}
}
@media(orientation:landscape) and (max-height:590px){
 .customer-avatar{width:48px;height:48px;flex-basis:48px;border-radius:12px}
 .mission-bar{min-height:51px;padding:2px 4px}
}
@media(orientation:landscape) and (max-height:590px){
 .friendship-grid{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding:3px 3px 10px}
 .friendship-card{flex:0 0 166px;min-width:166px;max-width:166px;scroll-snap-align:start}
 .friendship-card img{width:120px;height:120px}
}
.friendship-swipe-hint{display:none}
@media(max-width:760px), (orientation:landscape) and (max-height:590px){
 .friendship-swipe-hint{display:block;text-align:center;color:#8c8e77;font-weight:800;font-size:10px;padding:1px 0 3px}
}

/* v0.1.29: anchor the cover to the hero title, not the ever-growing left panel.
   Portrait/mobile retain their original vertical stacking. */
@media (min-width:761px) {
  .home-content { align-items:start; }
  .hero-illustration {
    align-self:start;
    margin-top:clamp(52px,9vh,110px);
    padding:12px 0;
  }
}

/* v0.1.30 — customer-specific daily puzzles and lifetime delivery achievements. */
.delivery-milestones{max-width:520px;margin:12px 0;padding:12px;border:1px solid #e8dbc6;border-radius:16px;background:#fffdf8;color:#476955;box-shadow:0 3px 12px #77614214}
.delivery-badges{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin:10px 0}
.delivery-badge{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;gap:4px;padding:11px 5px;background:#fff5df;border:1px solid #e9d6b1;border-radius:13px;text-align:center}
.delivery-badge>span{font-size:27px;line-height:1.25}
.delivery-badge strong{font-size:10px;line-height:1.45;overflow-wrap:anywhere}
.delivery-badge small{font-size:10px;color:#896b45;font-weight:800}
.delivery-badge.pending{background:#f5f3ef;border-color:#e8e4da;filter:saturate(.5);opacity:.78}
.delivery-milestones>small{display:block;font-size:10px;line-height:1.65;color:#827763}
.friendship-today{background:#f0f8ef;border:1px solid #d5e9d5;border-radius:16px;padding:12px;margin-top:16px;text-align:left}
.friendship-today p{font-size:12px;line-height:1.7;margin:0 0 10px}
.friendship-today button{width:100%;min-height:42px;font-size:12px}
.friendship-today small{display:block;color:#648371;font-size:10px;line-height:1.6;margin-top:8px}
@media(max-width:420px){.delivery-badges{gap:4px}.delivery-badge{padding:8px 3px}.delivery-badge>span{font-size:22px}.delivery-badge strong{font-size:9px}}
@media(prefers-reduced-motion:reduce){.delivery-badge{transition:none}}

.result-guest-note{margin:10px 0;padding:10px 12px;border-radius:12px;border:1px solid #eac9c7;background:#fff0ec;color:#9e5d53;font-size:12px;font-weight:900;line-height:1.5}
.result-guest-note[hidden]{display:none}

/* v0.1.31 - warm guest delivery dialogue and affinity scenes */
.guest-delivery-dialog,.guest-story-dialog{position:fixed;max-width:min(460px,calc(100vw - 24px));width:100%;max-height:92dvh;overflow:auto;margin:auto;border:2px solid #f0d3bb;border-radius:28px;background:radial-gradient(circle at 50% 5%,#fff0d9,#fff9f2 57%,#fff5f8);color:#385d4e;text-align:center;padding:22px 24px;box-shadow:0 28px 85px #3b302848}
.guest-delivery-dialog::backdrop,.guest-story-dialog::backdrop{background:#253b319e;backdrop-filter:blur(4px)}
.guest-delivery-kicker{font-size:10px;font-weight:900;letter-spacing:.14em;color:#d87748}
.guest-sparkles{font-size:27px;letter-spacing:.23em;color:#f5a66d;margin-bottom:4px}
.guest-delivery-portrait{display:block;width:min(242px,58vw);height:min(242px,58vw);margin:12px auto 10px;object-fit:cover;border-radius:32px;border:7px solid #fff;box-shadow:0 8px 21px #98665342}
.guest-delivery-dialog h2{font-size:clamp(22px,5vw,29px);margin:7px auto 11px;color:#2d654f}
.guest-delivery-message{background:#fff;box-shadow:0 4px 12px #94765c18;border:1px solid #f2dfcb;border-radius:19px;padding:15px 13px;font-size:15px;font-weight:800;line-height:1.8;margin:8px auto}
.guest-delivery-promise{font-size:12px;font-weight:800;color:#826f5d;background:#fff4e7;border-radius:13px;padding:12px 10px;margin:11px 0}
.guest-delivery-promise.done{background:#e8f6e7;color:#3c8466}
.guest-delivery-dialog>small{display:block;color:#997b6d;font-size:11px;line-height:1.7}
.guest-delivery-actions{display:grid;gap:8px;margin-top:14px}.guest-delivery-actions .btn{min-height:42px}
.guest-story-list{margin:14px 0;padding:12px;background:#fff8ed;border:1px solid #ecddcc;border-radius:18px;text-align:left}
.guest-story-list>strong{font-size:13px}.guest-story-list>p{font-size:11px!important;margin:4px 0 9px!important}
#guestStoryList{display:grid;gap:8px}.guest-story-chip{width:100%;min-height:45px;display:flex;align-items:center;gap:9px;border:1px solid #e6d3bf;background:#fff;border-radius:13px;padding:8px 11px;color:#4b6857;text-align:left;cursor:pointer}
.guest-story-chip strong{font-size:12px;flex:1}.guest-story-chip small{font-size:10px;color:#cb805d}.guest-story-chip.locked{opacity:.55;cursor:default}
.guest-promise-preview{margin-top:9px;background:#fff;border:1px dashed #c0d8b7;border-radius:11px;padding:10px 9px;font-size:11px;font-weight:800;line-height:1.6}
.guest-story-dialog img{width:min(192px,52vw);height:min(192px,52vw);border:5px solid #fff;border-radius:25px;object-fit:cover;box-shadow:0 7px 16px #a57b5940}
.guest-story-dialog h2{font-size:21px;margin:10px auto}.guest-story-dialog p{line-height:1.8;font-size:13px;margin:11px 0}.guest-story-dialog #guestStoryReply{color:#a26f56}.guest-story-dialog .btn{width:100%;margin-top:8px}
@media(max-height:650px){.guest-delivery-dialog{padding:12px 16px}.guest-delivery-portrait{width:130px;height:130px;margin:6px auto}.guest-delivery-message{padding:8px;font-size:13px}.guest-sparkles{font-size:18px}}
@media(prefers-reduced-motion:no-preference){.guest-delivery-dialog[open] .guest-delivery-portrait{animation:guest-pop .45s both}@keyframes guest-pop{from{opacity:.4;transform:scale(.88)}to{opacity:1;transform:scale(1)}}}
body.reduced-motion .guest-delivery-portrait{animation:none!important}

/* v0.1.32 — static promotional art; keep game canvases unchanged.
   Desktop uses a landscape illustration, phones display a portrait composition
   after the primary CTAs. No network libraries, SVG/Canvas image rendering, or JS needed. */
.home-copy .home-logo{margin:18px 0 15px;line-height:1;max-width:535px;letter-spacing:normal}
.home-logo img{display:block;width:100%;height:auto;object-fit:contain;filter:drop-shadow(0 6px 10px rgba(117,70,35,.075))}
.home-mobile-art{display:none}
.hero-illustration{width:100%;max-width:620px;min-width:0}
.hero-picture{display:block;width:100%;overflow:hidden;border:5px solid rgba(255,255,255,.78);border-radius:28px;box-shadow:0 20px 45px rgba(112,83,52,.18),0 4px 10px rgba(112,83,52,.07);background:#f4e7d3}
.hero-picture img{display:block;width:100%;height:auto;max-width:none;max-height:none;filter:none;animation:none;aspect-ratio:1672/941;object-fit:cover}
.hero-illustration .hero-caption{padding:15px 0 3px}
@media(min-width:761px){
 .home-content{grid-template-columns:minmax(310px,1fr) minmax(370px,1.12fr);gap:clamp(20px,3vw,48px)}
 .hero-illustration{margin-top:clamp(64px,12vh,138px);padding:0}
}
@media(max-width:760px){
 .home-copy .home-logo{width:min(100%,480px);margin:12px auto 12px}
 .home-mobile-art{display:block;margin:20px auto 16px;width:min(100%,430px);aspect-ratio:1.24;overflow:hidden;border:4px solid #fffdfa;border-radius:20px;box-shadow:0 12px 26px #986e4526;background:#f4e7d4}
 .home-mobile-art img{width:100%;height:100%;display:block;object-fit:cover;object-position:center 43%}
 .hero-illustration{display:none}
 .home-copy .lead{margin:8px 0 16px}
}
@media(max-width:420px){
 .home-copy .home-logo{max-width:345px;margin:8px auto 10px}
 .home-mobile-art{margin:15px auto 12px;aspect-ratio:1.46;border-radius:17px}
}
@media(orientation:landscape) and (max-height:590px) and (max-width:760px){
 .home-mobile-art{display:none}
}

/* Compact landscape title: show the start actions and illustration together. */
@media (orientation:landscape) and (max-height:590px){
 .home-page{padding-top:9px;padding-bottom:12px}
 .home-content{min-height:0;gap:14px}
 .home-copy{padding:9px 0}
 .home-copy .home-logo{width:min(100%,320px);margin:4px 0 7px}
 .home-copy .lead{font-size:12px;line-height:1.45;margin:5px 0 12px}
 .eyebrow{font-size:11px}
 .home-buttons{gap:7px}
 .home-buttons .btn-xl{min-height:43px;padding:8px 13px;font-size:13px;border-radius:12px}
 .secondary-actions{margin-top:12px}
 .hero-illustration{margin-top:32px;padding:0}
 .hero-illustration .hero-caption{font-size:10px;padding:8px 0}
}
@media (orientation:landscape) and (max-height:590px) and (max-width:760px){
 .home-content{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;padding-top:6px}
 .home-copy{max-width:none}
 .hero-illustration{display:block;max-width:none;width:100%;margin:29px 0 0}
 .hero-picture{border-width:3px;border-radius:17px}
 .home-mobile-art{display:none}
 .home-copy .home-logo{width:min(100%,275px)}
 .home-bottom{display:none}
}
@media (orientation:landscape) and (max-height:590px) and (max-width:760px){
 .hero-illustration{align-self:start}
}


/* v0.1.33: preserve the complete title artwork on phones.
   Both 3 smiling faces and the bento must remain fully visible — no centre-crop.
   Image's intrinsic 16:9 aspect ratio drives the card height at every viewport. */
@media (max-width:760px) and (orientation:portrait){
  .home-mobile-art{
    width:min(100%,430px);
    height:auto;
    aspect-ratio:auto;
    overflow:hidden;
    display:block;
  }
  .home-mobile-art img{
    display:block;
    width:100%;
    height:auto;
    aspect-ratio:1672 / 941;
    object-fit:contain;
    object-position:center;
  }
}

/* v0.1.34: monthly guest celebrations — below the daily request, not in the puzzle controls. */
.seasonal-request{margin:13px 0;padding:14px;background:linear-gradient(120deg,#fff2df,#fff9ef 67%,#ecf4e4);border:1px solid #eccfaf;border-radius:18px;display:grid;gap:8px;text-align:left}
.seasonal-request>strong{font-weight:900;font-size:14px;color:#855c3b}
.seasonal-request>p{font-size:12px!important;line-height:1.65!important;color:#685944!important;margin:0!important}
.seasonal-request>.btn{font-size:13px;min-height:44px;width:100%}
.seasonal-request>small{font-size:10px;color:#7b826a;line-height:1.5}
.seasonal-request>.btn:disabled{opacity:.65;cursor:not-allowed;background:#f0ede5}
@media (max-width:480px){.seasonal-request{padding:11px;margin:9px 0}.seasonal-request>strong{font-size:13px}}

.friend-event-hint{display:block;color:#b77a41!important;font-weight:850;letter-spacing:0}

/* v0.1.35-A — story landscapes, seasonal portraits and consent-first travel debug */
.guest-story-dialog{max-width:min(600px,calc(100vw - 20px))}
.guest-story-dialog picture{display:block;margin:10px auto 13px;width:min(100%,490px)}
.guest-story-dialog picture img{display:block;width:100%;height:auto;aspect-ratio:8/5;object-fit:contain;border-radius:18px;border:5px solid #fff;box-shadow:0 8px 19px #a57b5940}
.guest-delivery-portrait.seasonal-art{width:min(258px,65vw);height:min(300px,43dvh);object-fit:contain;object-position:center;border-radius:21px;background:#fff7ea}
.geo-home{margin:12px 0;padding:12px 13px;border:1px solid #d7e4d6;border-radius:17px;background:#f6fcf3;color:#426852;font-size:12px}
.geo-title{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}.geo-title strong{font-size:13px}.geo-title small{font-size:10px;opacity:.7}.geo-home>p{margin:8px 0 4px;font-weight:700}.geo-home>small{font-size:10px}
.geo-debug{margin-top:11px;padding:9px;border:1px solid #b2d3bc;border-radius:12px;background:white}.geo-debug summary{cursor:pointer;font-weight:800}.geo-debug p{font-size:11px;line-height:1.6}.geo-debug label{display:block;font-weight:800;margin:8px 0}.geo-debug input{box-sizing:border-box;width:100%;padding:11px;border:1px solid #ccd9ca;border-radius:9px;font-size:15px;margin:5px 0;background:#fff;color:#254737}.geo-coordinates,.geo-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.geo-actions{margin-top:8px}.geo-actions button{font-size:11px;padding:8px 6px;white-space:normal;min-width:0}.geo-debug #geoStatus{min-height:28px;color:#477c60}
@media(max-width:480px){.geo-home{padding:10px}.geo-title{align-items:start}.guest-story-dialog{padding:15px 13px}.guest-story-dialog picture img{aspect-ratio:8/5}.guest-delivery-portrait.seasonal-art{max-height:33dvh}}
@media(max-height:650px){.guest-delivery-portrait.seasonal-art{width:180px;height:170px}}

/* v0.1.35-B: optional travel controls */
.geo-travel-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:end;margin:9px 0}.geo-select-label{flex:1 1 160px;min-width:130px;font-size:.8rem;font-weight:700}.geo-select-label select,.geo-settings input[type="text"]{width:100%;border:1px solid #d3be9d;border-radius:10px;padding:9px;background:#fffaf2;font:inherit}.geo-settings{margin-top:7px;border-top:1px solid #eadcc6;padding-top:7px}.geo-settings summary,.geo-debug summary{cursor:pointer;font-weight:700}.geo-settings p,.geo-debug p{font-size:.76rem;line-height:1.6}.geo-option{display:flex;align-items:start;gap:7px;font-size:.78rem;padding:6px 0}.geo-option input{flex:0 0 auto;margin-top:3px}.geo-actions{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}.geo-home .btn{min-height:36px;font-size:.78rem;padding:7px 12px}.geo-debug{margin:9px 0}.geo-debug label{display:block;font-size:.8rem}.geo-home #geoStatus{min-height:18px;font-size:.77rem;line-height:1.5;white-space:normal}.geo-home select:focus-visible,.geo-home input:focus-visible{outline:3px solid #f0b767}.geo-home #geoConfirmGps{background:#dcf1dc}.geo-home .geo-gps-details{font-variant-numeric:tabular-nums;font-size:.75rem;padding:8px 10px;border-radius:9px;background:#eaf4f0;color:#214939;overflow-wrap:anywhere}
@media (max-width:430px){.geo-travel-actions{align-items:stretch}.geo-travel-actions .btn{width:100%}.geo-select-label{width:100%;flex-basis:100%}}

/* v0.1.35-D: A hidden GPS action must never look tappable. */
.geo-home [hidden],.geo-home #geoConfirmGps[hidden]{display:none!important}
.geo-home .geo-candidate-picker{margin:10px 0;padding:10px;border-radius:12px;background:#f3f8ea;border:1px solid #aac9ad}
.geo-home .geo-candidate-picker label{display:block;font-size:.77rem;font-weight:800;margin-bottom:7px}
.geo-home .geo-candidate-picker select{display:block;width:100%;min-height:42px;border:1px solid #acc5ab;border-radius:9px;padding:8px;font:inherit;background:#fff;color:#254737}
.geo-home .geo-candidate-hint{margin:8px 0 0;padding:7px 9px;border-radius:9px;background:#fffdf4;border:1px dashed #d0b470;color:#6a5426;font-size:.75rem;font-weight:700}
.geo-home .geo-candidate-picker button{margin-top:8px;min-height:40px}
.geo-home #geoPublicApply.geo-attention{position:relative;animation:geoPulse 1.1s ease-in-out infinite;box-shadow:0 0 0 0 rgba(240,183,103,.5);border-color:#e4a447}
.geo-home #geoPublicApply.geo-attention::after{content:"← 候補の絞り込みはこちら";display:inline-block;margin-left:6px;font-size:.68rem;font-weight:700;color:#8a5b16}
@keyframes geoPulse{0%{transform:scale(1);box-shadow:0 0 0 0 rgba(240,183,103,.45)}55%{transform:scale(1.02);box-shadow:0 0 0 10px rgba(240,183,103,0)}100%{transform:scale(1);box-shadow:0 0 0 0 rgba(240,183,103,0)}}

/* v0.1.35-R: compact regional food collection; ordinary game controls unaffected. */
.collection-home-link{margin:8px 0 3px!important}.collection-home-link button{font:inherit;cursor:pointer;border:1px solid #b9d9bc;background:#fffef8;border-radius:12px;padding:10px;width:100%;text-align:left;color:#315846;font-weight:750}.collection-home-link strong{float:right;color:#c56c45}
.regional-collection-shell{max-width:790px}.regional-collection-note{font-size:12px;background:#f2f8ed;border-radius:12px;padding:12px;color:#55715d;line-height:1.6}
.regional-collection-tools{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:9px;margin:14px 0}.regional-collection-tools strong{color:#315d49}.regional-collection-tools>div{display:flex;gap:4px;background:#f4eee3;padding:4px;border-radius:12px}.regional-collection-tools button{border:0;border-radius:9px;background:transparent;color:#536a60;padding:8px 12px;min-height:39px;cursor:pointer;font-weight:700}.regional-collection-tools button.selected{background:white;color:#29604d;box-shadow:0 1px 5px #38564422}
.regional-collection-list{display:grid;gap:12px;margin-bottom:14px}.regional-pref{border:1px solid #e8dfd1;background:#fffdf7;border-radius:15px;padding:12px}.regional-pref header{display:flex;align-items:center;justify-content:space-between;color:#395c4a;margin-bottom:10px}.regional-pref header span{font-size:12px;color:#7e8f7f}.regional-foods{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.regional-food{display:flex;align-items:center;gap:8px;min-width:0;background:#f6fbf1;border:1px solid #dcebdd;border-radius:12px;padding:7px}.regional-food img{width:46px;height:46px;object-fit:contain;flex:0 0 46px}.regional-food div{min-width:0;flex:1}.regional-food strong{display:block;color:#355b46;font-size:12px;overflow-wrap:anywhere}.regional-food small{display:block;color:#748776;font-size:10px;line-height:1.45}.regional-food button{border-radius:9px;padding:7px 8px;border:1px solid #b6d4b4;background:#fff;color:#285b47;cursor:pointer;min-height:38px;font-size:11px;font-weight:800;max-width:91px}.regional-food.locked{background:#f4f1ec;border-color:#ece7df}.regional-food.locked img{filter:grayscale(1);opacity:.26}.regional-food.locked strong{color:#89918a}.regional-empty{text-align:center;color:#75867a;padding:30px}
@media(max-width:670px){.regional-foods{grid-template-columns:1fr}.regional-pref{padding:9px}.regional-food img{width:44px;height:44px;flex-basis:44px}.regional-collection-shell{padding-left:12px;padding-right:12px}}
@media(max-width:380px){.regional-collection-tools{display:block}.regional-collection-tools>div{margin-top:8px}.regional-food button{font-size:10px;padding:7px 5px}}

.regional-result-unlock{border:1px solid #d4ddbd;border-radius:15px;background:#f7fcf1;padding:12px 14px;color:#355f46;margin:10px 0}.regional-result-unlock[hidden]{display:none}.regional-result-unlock strong{display:block;font-size:14px}.regional-result-unlock p{font-size:12px;margin:7px 0}.regional-result-unlock button{min-height:40px;border:1px solid #b8d7b9;background:#fff;border-radius:10px;color:#285644;padding:8px 14px;font-weight:800;cursor:pointer}

/* v0.1.35-S — unlocked-food zoom and multi-select bento planner. */
.regional-mix-panel{background:linear-gradient(145deg,#f6fcf4,#fff9ef);border:2px solid #bed8bc;border-radius:17px;margin:10px 0 18px;padding:13px;box-shadow:0 3px 14px #35594213}
.regional-mix-heading{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:4px;color:#315b46}.regional-mix-heading span{font-size:12px;font-weight:800;background:#fff;border-radius:20px;padding:5px 10px;border:1px solid #c5d7c2}
.regional-picked-list{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-height:42px;margin:10px 0}.regional-picked-list>span{font-size:12px;color:#7b877a}.regional-picked-list button{font-size:12px;color:#315b46;background:#fff;border:1px solid #9fceab;border-radius:25px;padding:7px 10px;min-height:38px;cursor:pointer}
.regional-mix-panel p{font-size:12px;line-height:1.5;color:#5b725d;margin:6px 0 12px}.regional-mix-actions{display:flex;gap:8px;flex-wrap:wrap}.regional-mix-actions .btn{min-height:44px}.regional-mix-actions .btn-main{flex:1}.regional-mix-actions .btn:disabled{opacity:.46;cursor:not-allowed}
.regional-food.chosen{border-color:#77a988;box-shadow:0 0 0 1px #77a988;background:#ebfae7}.regional-food .regional-food-detail{display:flex;flex:1;min-width:0;max-width:none;padding:0;border:0;background:transparent;text-align:left;align-items:center;gap:8px;cursor:zoom-in}.regional-food-detail span{min-width:0;flex:1}.regional-food .regional-food-detail img{width:46px;height:46px;flex:0 0 46px}.regional-food .regional-food-pick{flex:0 0 auto;max-width:82px;min-width:74px}.regional-food .regional-food-pick.chosen{background:#327658;color:white;border-color:#327658}
.regional-detail-dialog{position:fixed;max-width:min(520px,calc(100vw - 22px));width:100%;max-height:90dvh;overflow:auto;border:1px solid #e0d3bd;border-radius:20px;background:#fffaf1;padding:19px;color:#345847;box-shadow:0 14px 50px #1c272d66}.regional-detail-dialog::backdrop{background:#152c2bbb;backdrop-filter:blur(3px)}.regional-detail-head h2{font-size:21px;margin:4px 0}.regional-detail-head p{font-size:13px;margin:0 0 12px}.regional-detail-close{position:absolute;top:12px;right:12px;border:0;border-radius:50%;width:39px;height:39px;background:#efe6d6;color:#405f4e;font-size:26px;cursor:pointer}.regional-detail-photo{display:block;width:min(100%,420px);aspect-ratio:1;object-fit:contain;background:#f4eee3;margin:0 auto;border-radius:14px;border:1px solid #eadbc8}.regional-detail-icon-row{display:flex;align-items:center;gap:9px;border-bottom:1px solid #e7dfd3;margin:10px 0;padding-bottom:8px}.regional-detail-icon-row img{width:58px;height:58px;object-fit:contain}.regional-detail-icon-row p{color:#6b7b70;font-size:12px}.regional-detail-dialog #regionalDetailStatus{font-size:12px;font-weight:700}.regional-detail-actions{display:flex;gap:9px;flex-wrap:wrap}.regional-detail-actions .btn{flex:1;min-height:44px}
@media(max-width:670px){.regional-food .regional-food-detail{max-width:none}.regional-mix-panel{padding:10px}.regional-mix-actions .btn{font-size:12px;padding:10px}.regional-detail-dialog{padding:14px}.regional-detail-photo{max-height:49dvh}}
@media(max-width:365px){.regional-mix-actions .btn{flex-basis:100%}.regional-food .regional-food-pick{min-width:66px;max-width:70px}.regional-food .regional-food-detail img{width:40px;height:40px;flex-basis:40px}}


/* v0.1.35-S3: always-visible regional selection meter and food detail captions.
   Fixed positioning instead of sticky because #app intentionally uses overflow:hidden. */
#collectionPage .regional-collection-shell{padding-bottom:110px}
.collection-floating-status{position:fixed;z-index:20;top:calc(env(safe-area-inset-top, 0px) + 12px);right:max(14px,calc((100vw - 850px) / 2));min-width:165px;padding:10px 12px;border:1.5px solid #9fcbac;border-radius:15px;background:rgba(253,255,249,.96);color:#315e49;box-shadow:0 7px 23px #2c4f3933;text-align:left;cursor:pointer;backdrop-filter:blur(8px);display:flex;flex-direction:column;gap:2px;font-size:12px;font-weight:800}
.collection-floating-status strong{font-size:17px;color:#27764e;font-variant-numeric:tabular-nums}
.collection-floating-status small{font-size:10px;line-height:1.45;color:#567465;max-width:220px;white-space:normal}
.collection-floating-arrow{font-size:10px;font-weight:700;color:#9d754b}
.collection-floating-status:focus-visible{outline:3px solid #eaa462;outline-offset:2px}
.regional-detail-description{margin:11px 0 6px;line-height:1.8;font-size:14px;color:#365849;background:#fffdf9;border:1px solid #e9deca;border-radius:11px;padding:11px 13px}
.regional-detail-photo{object-fit:cover;background:#ecdfc9}
@media(max-width:700px){
 .collection-floating-status{top:auto;bottom:calc(10px + env(safe-area-inset-bottom, 0px));left:50%;right:auto;transform:translateX(-50%);width:min(92vw,440px);min-height:57px;display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:10px;padding:8px 12px}
 .collection-floating-status>span:first-child{white-space:nowrap}
 .collection-floating-status small{grid-row:2;grid-column:1 / -1;font-size:11px}
 .collection-floating-arrow{grid-row:1;grid-column:2;justify-self:end}
 .regional-detail-photo{max-height:38dvh}
 .regional-detail-description{font-size:12px;line-height:1.65;padding:9px 10px}
}

/* v0.1.35-S5: session-only debug access to regional encyclopedia details. */
.collection-debug-control{border:1px dashed #d48f56;background:#fff9ed;border-radius:12px;padding:11px 12px;margin:9px 0 12px;color:#5f503d}
.collection-debug-control[hidden],.collection-debug-notice[hidden],#regionalDetailPickBtn[hidden]{display:none!important}
.collection-debug-control>strong{display:block;font-size:13px;color:#9d623d;margin-bottom:6px}
.collection-debug-toggle{display:flex;align-items:flex-start;gap:9px;font-size:13px;font-weight:800;line-height:1.5;cursor:pointer}
.collection-debug-toggle input{width:19px;height:19px;accent-color:#c16c42;flex:0 0 auto;margin:1px 0 0}
.collection-debug-control small{font-size:11px;display:block;line-height:1.6;color:#796953;margin:8px 0 0}
.collection-debug-notice{border:1px solid #e9c79b;background:#fff8e8;border-radius:12px;color:#925f37;font-weight:700;line-height:1.6;padding:10px;font-size:12px}
.regional-food.preview-only{background:#fff9ef;border-color:#ead6bb}
.regional-food-preview-label{font-size:10px;font-weight:800;color:#956943;padding:5px 2px;white-space:nowrap}
.regional-food.preview-only .regional-food-detail{color:#725c42}
@media(max-width:370px){.regional-food-preview-label{font-size:9px}.collection-debug-toggle{font-size:12px}}