/* Display modes and the Spiel business menu. No framework dependencies. */
.header-actions{display:flex;align-items:center;gap:32px}
.view-switch{display:flex;gap:4px}
.view-switch button{width:38px;height:38px;display:grid;place-items:center;color:var(--muted);transition:background .2s,color .2s}
.view-switch button[aria-pressed="true"]{background:var(--surface);color:var(--ink)}
.view-switch svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.2}
.grid-view .gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));overflow:hidden;scroll-snap-type:none}
.grid-view .panel{height:auto;min-width:0;transform-origin:0 0}
.grid-view .panel h2{top:27%;left:22px;right:15px;font-size:clamp(23px,2.7vw,39px);letter-spacing:-1.3px}
.grid-view .panel-bottom{left:22px;right:22px;bottom:20px}
.grid-view .gallery-controls button{visibility:hidden}
.grid-view .gallery-controls #position{min-width:78px;text-align:center}
#menu{width:100vw;max-width:none;height:100svh;max-height:none;margin:0;padding:0;border:0;overflow:hidden}
#menu[open]{display:block;animation:menu-enter .4s both}
#menu .close{right:24px;top:25px;z-index:3;width:48px;height:48px}
#menu .menu-brand{position:absolute;left:5vw;top:50%;margin:0;transform:translateY(-50%);font-size:clamp(44px,5vw,80px);letter-spacing:-4px}
#menu .business-nav{position:absolute;left:21%;top:50%;width:37%;display:flex;flex-direction:column;align-items:start;gap:7px;transform:translateY(-50%)}
#menu .business-nav button{border:0;padding:14px 18px;max-width:100%;text-align:left;font-size:clamp(15px,1.7vw,25px);line-height:1.2;color:var(--muted);transform:rotate(var(--angle));transform-origin:-80px center;transition:transform .55s cubic-bezier(.22,1,.36,1),color .3s,background .3s}
#menu .business-nav button.selected{color:var(--ink);background:var(--surface);transform:translateX(22px) rotate(0)}
#menu .company-nav{position:absolute;left:5vw;right:5vw;bottom:32px;display:flex;gap:32px;align-items:center}
#menu .company-nav a{font-size:12px;border:0;padding:8px 0;color:var(--muted)}
#menu .company-nav a:hover{color:var(--ink)}
.menu-preview{position:absolute;right:5vw;top:15vh;bottom:15vh;width:30%;isolation:isolate;overflow:hidden;background:var(--surface)}
.menu-preview h2{position:absolute;top:42%;left:25px;right:20px;font-size:clamp(24px,3vw,46px);font-weight:700;letter-spacing:-1.5px;line-height:1.04;margin:0;overflow-wrap:normal}
.menu-preview p{position:absolute;left:25px;right:25px;bottom:25px;font-size:11px;line-height:1.6;margin:0}
.menu-preview.oil .visual{background:radial-gradient(ellipse at 55% 23%,var(--muted),var(--surface) 48%,var(--bg) 86%)}
@keyframes menu-enter{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media(max-width:1000px){#menu .menu-brand{left:4vw;font-size:48px}#menu .business-nav{left:23%;width:40%}#menu .business-nav button{font-size:16px;padding:14px 12px}.menu-preview{right:4vw;width:28%}.menu-preview h2{font-size:27px;left:20px;right:14px}}
@media(max-width:700px){.header-actions{gap:16px}.view-switch button{width:32px;height:36px}.menu-button{padding-left:0}.menu-button span{margin-left:8px}.grid-view .gallery{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:10px}.grid-view .panel h2{font-size:clamp(15px,4.25vw,24px);line-height:1.05;letter-spacing:-.7px;left:12px;right:8px;top:30%}.grid-view .panel-bottom{left:12px;right:12px;bottom:12px;font-size:8px}.grid-view .panel-bottom span:last-child{font-size:19px}.grid-view .web .panel-bottom span:first-child,.grid-view .ai .panel-bottom span:first-child{display:none}#menu .menu-brand{left:24px;top:32px;transform:none;font-size:43px}#menu .close{top:23px;right:16px}#menu .business-nav{left:14%;top:49%;width:80%;gap:5px}#menu .business-nav button{font-size:clamp(16px,4.5vw,22px);padding:14px 16px;transform-origin:-50px center}#menu .business-nav button.selected{transform:translateX(12px)}.menu-preview{display:none}#menu .company-nav{left:24px;right:24px;bottom:28px;gap:24px;flex-wrap:wrap}#menu .company-nav a{font-size:11px}}
@media(max-height:550px) and (min-width:701px){#menu .business-nav{gap:0}#menu .business-nav button{padding:9px 14px;font-size:15px}#menu .company-nav{bottom:10px}.grid-view .panel h2{top:20%;font-size:23px}.grid-view .panel-bottom{bottom:10px}}
@media(prefers-reduced-motion:reduce){#menu[open]{animation:none}.view-switch button,#menu .business-nav button{transition:none}}