:root{--primary:#ff6b6b;--primary-dark:#e55353;--background:linear-gradient(135deg, #ffecd2, #fcb69f);--text:#222222;--muted:#555555;--border:rgba(0, 0, 0, 0.08);--success-bg:rgba(255, 255, 255, 0.85);--shadow:0 10px 30px rgba(0, 0, 0, 0.05);--radius:18px;--transition:0.2s ease}*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:'Noto Sans TC',"PingFang SC","Microsoft YaHei",sans-serif;background:var(--background);background-attachment:fixed;color:var(--text);min-height:100vh;display:flex;justify-content:center;align-items:center;padding:40px 20px}button,input{font:inherit}button{border:none;cursor:pointer}.container{width:100%;max-width:1200px;background:#fff0;padding:0}.header{text-align:center;margin-bottom:12px;background:linear-gradient(135deg,#f6d365,#fda085);padding:35px 24px;border-radius:24px;box-shadow:0 10px 25px rgb(229 83 83 / .15);border:1px solid rgb(255 255 255 / .3)}.header-logo{display:block;margin:0 auto 20px;max-width:180px;height:auto;background-color:rgb(36 30 24 / .85);padding:0 12px;border-radius:16px;border:1px solid rgb(255 255 255 / .1);box-shadow:0 8px 24px rgb(42 36 30 / .15);transition:transform 0.2s ease,box-shadow 0.2s ease}.header-logo:hover{transform:translateY(-2px);box-shadow:0 10px 25px rgb(42 36 30 / .25)}.header h1{font-size:clamp(2rem, 5vw, 2.8rem);font-weight:900;color:#1a1a1a;margin-bottom:14px;text-shadow:0 2px 4px rgb(255 255 255 / .4)}.header p{color:#3d3d3d;font-size:1.1rem;font-weight:700}.section-title{font-size:1.3rem;margin-bottom:20px;display:flex;align-items:center;gap:8px;font-weight:700}.preset-buttons{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:28px}.preset-btn{color:#fff;padding:12px 22px;border-radius:999px;transition:var(--transition);font-weight:700;font-size:.95rem;box-shadow:0 4px 10px rgb(0 0 0 / .05)}.preset-btn:hover{transform:translateY(-2px);box-shadow:0 6px 15px rgb(0 0 0 / .1)}.preset-btn:focus-visible,.draw-btn:focus-visible,.sound-btn:focus-visible{outline:3px solid rgb(255 107 107 / .4);outline-offset:3px}.breakfast{background:#e68a00}.lunch{background:#2e7d32}.dinner{background:#c62828}.supper{background:#4527a0}.restaurant-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.restaurant-item{display:flex;align-items:center;gap:14px;padding:16px;border-radius:var(--radius);background:rgb(255 255 255 / .5);border:1px solid rgb(255 255 255 / .4);box-shadow:0 6px 20px rgb(0 0 0 / .02);transition:transform 0.18s ease,box-shadow 0.18s ease,border-color 0.18s ease,background 0.18s ease;cursor:pointer}.restaurant-item:hover{transform:translateY(-3px);box-shadow:0 12px 25px rgb(0 0 0 / .06);border-color:var(--primary);background:rgb(255 255 255 / .8)}.restaurant-number{width:38px;height:38px;border-radius:50%;background:var(--primary);color:#fff;display:flex;justify-content:center;align-items:center;font-size:1rem;font-weight:700;flex-shrink:0}.restaurant-input{flex:1;border:none;background:rgb(0 0 0 / .04);padding:12px 14px;border-radius:12px;outline:none;font-size:1rem;transition:background 0.2s;color:var(--text);width:100%}.restaurant-item:hover .restaurant-input{background:#fff}.preview-card{position:fixed;width:320px;background:#fff;border-radius:var(--radius);box-shadow:0 14px 40px rgb(0 0 0 / .18);padding:0;opacity:0;visibility:hidden;transition:opacity 0.2s ease,visibility 0.2s ease;z-index:9999;overflow:hidden}.preview-card.active{opacity:1;visibility:visible}.preview-image{width:100%;height:180px;object-fit:cover;display:block}.preview-content{padding:18px}.preview-title{font-size:1.15rem;font-weight:700;color:#222;margin-bottom:8px}.preview-desc{font-size:.95rem;color:#666;line-height:1.5;margin-bottom:14px}.preview-link{display:inline-flex;align-items:center;gap:6px;background:var(--primary);color:#fff;padding:10px 16px;border-radius:999px;text-decoration:none;font-size:.9rem;font-weight:600;transition:var(--transition)}.preview-link:hover{background:var(--primary-dark);transform:scale(1.02)}.preview-link svg{width:16px;height:16px}.draw-section{text-align:center;margin-top:40px}.draw-btn{background:linear-gradient(135deg,#ff6b6b,#ff8e53);color:#fff;padding:18px 54px;border-radius:999px;font-size:1.25rem;font-weight:700;transition:transform 0.18s ease,box-shadow 0.18s ease;box-shadow:0 8px 24px rgb(255 107 107 / .3)}.draw-btn:hover:not(:disabled){transform:scale(1.04);box-shadow:0 12px 30px rgb(255 107 107 / .4)}.draw-btn:disabled{background:#ccc;cursor:not-allowed;box-shadow:none;transform:none}.result-area{min-height:160px;margin-top:35px;display:flex;align-items:center;justify-content:center;flex-direction:column}.empty-tip{color:#444;font-weight:700;text-align:center;font-size:1.1rem;text-shadow:0 1px 1px rgb(255 255 255 / .5)}.shuffle-text{font-size:2.2rem;color:var(--primary);font-weight:900;text-shadow:0 2px 4px rgb(0 0 0 / .1);animation:shake 0.12s infinite}@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}.result-card{width:100%;max-width:580px;background:var(--success-bg);border:3px dashed var(--primary);backdrop-filter:blur(10px);border-radius:22px;padding:32px 24px;text-align:center;box-shadow:0 10px 30px rgb(0 0 0 / .05);animation:popIn 0.35s cubic-bezier(.34,1.56,.64,1)}@keyframes popIn{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}.result-label{color:#555;margin-bottom:12px;font-size:1rem;font-weight:700}.result-name{font-size:clamp(2rem, 6vw, 2.8rem);color:var(--primary);font-weight:900;word-break:break-word;margin-bottom:14px}.result-info{color:var(--primary);font-weight:700;font-size:1.1rem}.history{margin-top:35px;border-top:1px dashed rgb(0 0 0 / .15);padding-top:25px;padding-bottom:76px}.history h3{margin-bottom:15px;color:#333;font-size:1.1rem}.history-tags{display:flex;flex-wrap:wrap;gap:10px}.history-tag{background:rgb(255 255 255 / .6);border:1px solid rgb(255 255 255 / .4);border-radius:999px;padding:8px 16px;font-size:.9rem;color:#333;font-weight:600}.sound-btn{position:fixed;right:25px;bottom:25px;background:#fff;border:1px solid rgb(0 0 0 / .1);padding:12px 20px;border-radius:999px;box-shadow:0 6px 20px rgb(0 0 0 / .06);z-index:10000;font-weight:700;transition:var(--transition),transform 0.15s ease}.sound-btn:hover{border-color:var(--primary);transform:translateY(-2px);box-shadow:0 8px 25px rgb(0 0 0 / .1)}@media (max-width:992px){.restaurant-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width:768px){.restaurant-grid{grid-template-columns:1fr}.draw-btn{width:100%}.preset-buttons{justify-content:center}.preview-card{position:fixed!important;left:50%!important;top:50%!important;right:auto!important;bottom:auto!important;transform:translate(-50%,-50%)!important;width:calc(100% - 40px);max-width:360px;z-index:10001!important}}.float-nav-btn{position:fixed;right:25px;background:#fff;border:1px solid rgb(0 0 0 / .1);padding:12px 22px;border-radius:999px;box-shadow:0 6px 20px rgb(0 0 0 / .06);z-index:10000;font-weight:700;font-size:.95rem;color:var(--text);text-decoration:none;display:flex;align-items:center;justify-content:center;white-space:nowrap;transition:var(--transition),transform 0.15s ease}.sancan-btn{bottom:85px}.home-btn{bottom:145px}.float-nav-btn:hover{background:#2A241E;color:#fff;transform:translateY(-3px);box-shadow:0 8px 25px rgb(42 36 30 / .15)}.float-nav-btn:active{transform:translateY(-1px)}@media (max-width:768px){.float-nav-btn{right:15px;padding:10px 16px;font-size:.85rem}.sancan-btn{bottom:75px}.home-btn{bottom:125px}}.result-card-rich{padding:0!important;overflow:hidden;border:none!important;background:white!important;box-shadow:0 15px 40px rgb(255 107 107 / .25)}.result-card-rich .result-label{padding:20px 20px 10px;margin:0}.result-image-wrapper{width:100%;height:260px;overflow:hidden;position:relative;background:#f8f8f8}.result-food-img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 0.5s ease}.result-card-rich:hover .result-food-img{transform:scale(1.05)}.result-card-rich .result-name{padding:18px 20px 8px;margin:0;text-align:center}.result-card-rich .result-desc{padding:0 24px 20px;font-size:.95rem;color:#555;line-height:1.6;text-align:center}.result-map-link{display:flex;align-items:center;justify-content:center;background:var(--primary);color:white!important;padding:16px;text-decoration:none;font-weight:700;font-size:1rem;transition:background 0.2s;margin-top:10px}.result-map-link:hover{background:var(--primary-dark)}.fab-container{position:fixed;right:15px;bottom:15px;z-index:10000;display:flex;flex-direction:column;align-items:flex-end;gap:12px}.fab-main{width:50px;height:50px;border-radius:50%;background:linear-gradient(135deg,#ff6b6b,#ff8e53);color:#fff;border:none;box-shadow:0 6px 20px rgb(255 107 107 / .4);font-size:1.3rem;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform 0.3s cubic-bezier(.175,.885,.32,1.275);z-index:2}.fab-main:hover{transform:scale(1.05)}.fab-main.active .fab-icon{transform:rotate(90deg)}.fab-icon{transition:transform 0.3s ease;display:block;line-height:1}.fab-sub-buttons{display:flex;flex-direction:column;gap:12px;align-items:flex-end;opacity:0;visibility:hidden;transform:translateY(20px) scale(.8);transition:all 0.3s cubic-bezier(.175,.885,.32,1.275);pointer-events:none}.fab-container.expanded .fab-sub-buttons{opacity:1;visibility:visible;transform:translateY(0) scale(1);pointer-events:auto}.fab-item{padding:10px 16px!important;font-size:0.85rem!important;background:#fff;border:1px solid rgb(0 0 0 / .1);border-radius:999px;box-shadow:0 6px 20px rgb(0 0 0 / .06);font-weight:700;color:var(--text);text-decoration:none;display:flex;align-items:center;justify-content:center;white-space:nowrap;transition:all 0.2s ease;margin:0!important;position:relative!important;right:auto!important;bottom:auto!important}.fab-item:hover{background:#2A241E;color:#fff;transform:translateY(-2px)}@media (min-width:769px){.fab-main{display:none!important}.fab-container{position:static!important;right:auto!important;bottom:auto!important;display:block!important}.fab-sub-buttons{opacity:1!important;visibility:visible!important;transform:none!important;pointer-events:auto!important;display:block!important}.fab-item{position:fixed!important;right:25px!important;padding:12px 22px!important;font-size:0.95rem!important}.fab-item.sound-btn{bottom:25px!important}.fab-item.sancan-btn{bottom:85px!important}.fab-item.home-btn{bottom:145px!important}}.area-indicator{position:fixed;right:25px;bottom:205px;z-index:10001;display:flex;align-items:center;gap:8px;background:linear-gradient(135deg,#ff6b6b,#ff8e53);color:#fff;padding:14px 24px;border-radius:999px;box-shadow:0 8px 28px rgb(255 107 107 / .45);font-size:1.15rem;font-weight:800;letter-spacing:.5px;text-shadow:0 1px 3px rgb(0 0 0 / .15);animation:areaSlideIn 0.4s cubic-bezier(.175,.885,.32,1.275),areaPulse 2s ease-in-out infinite 0.4s;cursor:default;user-select:none;transition:bottom 0.35s cubic-bezier(.175,.885,.32,1.275),transform 0.2s ease,box-shadow 0.2s ease;white-space:nowrap}.area-indicator:hover{transform:scale(1.03) translateY(-2px);box-shadow:0 12px 35px rgb(255 107 107 / .55)}@keyframes areaPulse{0%,100%{box-shadow:0 8px 28px rgb(255 107 107 / .45)}50%{box-shadow:0 8px 35px rgb(255 107 107 / .65),0 0 20px rgb(255 107 107 / .2)}}@keyframes areaSlideIn{from{opacity:0;transform:translateY(20px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}@media (max-width:768px){.area-indicator{right:15px;bottom:72px;padding:11px 18px;font-size:1rem;font-weight:700}.fab-container.expanded~.area-indicator,.area-indicator.area-expanded{bottom:235px}}.area-indicator.hidden{display:none!important}