/* Sea / ink / parchment. Stretch borders only; keep all text in normal layout. */
:root{--ink:#243e49;--sea:#254f60;--deep:#182f3b;--paper:#f6efdd;--gold:#d6b476;--line:#d5c7a8}
body{color:var(--ink);background:#347b8c;font-size:14px}
[hidden]{display:none!important}
button{border-radius:4px;background:var(--sea);border:1px solid #193e50;box-shadow:inset 0 1px #ffffff22,0 2px 0 #183844;padding:10px 16px;line-height:1.5;white-space:normal}
button:hover{background:#35697a}button:disabled{cursor:not-allowed;box-shadow:none}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #c29547;outline-offset:3px}
input:focus,textarea:focus,select:focus{outline:2px solid #488397;outline-offset:1px}
.secondary,button.quiet{background:#e9dfc9;color:#344c51;border-color:#c6b995;box-shadow:0 2px #b8a888}
.secondary:hover,button.quiet:hover{background:#dfd1b4}.danger{background:#944d45;border-color:#703a39;box-shadow:0 2px #703a39}
.topbar{height:68px;padding:0 24px;gap:26px;background:var(--deep);border-bottom:3px solid #a18758;box-shadow:0 3px #15323b55}
.brand{font-size:22px;letter-spacing:2px;gap:10px;flex-shrink:0}.brand small{font-size:8px;letter-spacing:2px;color:#c6be9e}
.brand-icon{border:0;border-radius:0;color:#eed6a3;background:transparent;width:38px;height:38px;display:grid;place-items:center;flex:none;line-height:1}.brand-icon svg{display:block;width:32px;height:32px}
.island-tag{color:#bfccca}.top-actions{gap:8px}.top-actions .quiet{background:#294653;border-color:#4b6670;border-radius:4px;color:#f6e9ce;box-shadow:none}
#online{color:#c7dad5;font-size:11px;margin-right:10px}#world{inset:68px 0 0}
.floating{border:2px solid #bda477;border-radius:5px;background:var(--paper);box-shadow:0 3px #183d4666,inset 0 0 0 2px #fff9e9}
.identity{left:18px;top:18px;padding:10px 14px;min-width:240px;max-width:340px;gap:12px}
.identity>div:not(.avatar){min-width:0}.identity strong{max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}.identity small{color:#697873}
.avatar{flex-shrink:0;border:1px solid #b9a67d;border-radius:3px;box-shadow:inset 0 0 0 3px #f4e8c8;background-color:#d6d9b7}
.coin{font-size:17px;padding-left:12px;margin-left:auto;border-color:var(--line);white-space:nowrap}.hp-track{height:7px;border:1px solid #657164;background:#bfc5b4;border-radius:1px}.hp-track i{border-radius:0;background:#619476}
.raid-chip{left:auto;right:18px;top:18px;transform:none;min-width:210px;max-width:270px;padding:10px 14px;border-color:#bda477;background:var(--paper)}
.raid-chip:active{transform:translateY(1px)}.raid-chip strong{font-size:12px;overflow-wrap:anywhere}.beacon{color:#917044}
.quest-hint{display:none}#dock{bottom:16px;gap:8px}#dock nav{border:2px solid #bba174;border-radius:5px;background:var(--paper);box-shadow:0 4px #17384470;padding:5px;gap:6px}
#dock nav button{border:1px solid transparent;border-radius:3px;box-shadow:none;min-height:42px;padding:8px 22px;color:#324e56;font-size:13px}#dock nav button:hover{background:#e3d6b9;border-color:#c8b38a}#dock nav button span{color:#876e43}
.keys{background:#163943dd;border:1px solid #6b8d91;border-radius:3px;padding:7px 12px;text-shadow:none;color:#e4e9da}.keys kbd{background:#365563;border-color:#778b86;border-radius:2px}.dock-note{display:none}
dialog,dialog.board-panel{width:min(940px,calc(100vw - 40px));max-height:calc(100dvh - 40px);border:3px solid #ad9060;border-radius:6px;background:var(--paper);color:var(--ink);box-shadow:0 0 0 2px #243c45,0 18px 65px #0c253b77;overflow:auto;scrollbar-color:#b4a078 #eee3c9;scrollbar-width:thin}
dialog::backdrop{background:#102d4099;backdrop-filter:blur(3px)}
.panel-head,.board-panel .panel-head{padding:20px 26px;background:var(--deep);color:#fff0ca;border-bottom:3px solid var(--gold);gap:18px}
.panel-head h2,.board-panel .panel-head h2{font-size:22px;line-height:1.4;overflow-wrap:anywhere;letter-spacing:1px}.panel-head .eyebrow,.board-panel .panel-head .eyebrow{color:#b7c9c9;font-size:10px;letter-spacing:2px}
.close,.board-panel .close{flex-shrink:0;display:grid;place-items:center;background:#304c58;color:#f4ddb1;border:1px solid #8c947e;box-shadow:none;border-radius:3px;width:36px;height:36px;line-height:1}
#panelBody{padding:24px 26px 28px}.board-panel #panelBody{padding:0 26px 28px}
.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.grid>*,.row>*,.stack>*{min-width:0}.row.between{gap:12px}h3{color:#304c54}p{line-height:1.85}.muted{color:#65746f}
.field{font-size:13px;color:#4c625f}.field input,.field textarea,.field select,input,textarea,select,.board-panel .field input,.board-panel .field select,.board-panel textarea{border-color:#cabea0;border-radius:3px;background:#fffcf3;color:#294a53;min-height:42px}
input[type=checkbox],input[type=radio]{width:auto;min-height:0;accent-color:#2c6373}
.tabs,.inventory-tabs{flex-wrap:wrap;gap:7px}.tabs button{background:#e8ddc4;color:#516565;border:1px solid #caba98;box-shadow:none;border-radius:3px;font-size:13px}.tabs button.active,.board-navigation .tabs button.active,.board-panel .tabs[aria-label] button.active{background:#2c5968;color:#fff0cd;border-color:#234b5c;box-shadow:inset 0 -2px #d6b476}
.board-navigation{flex-wrap:wrap;border-color:var(--line)}.board-navigation .tabs button{border-radius:3px}.board-navigation .publish-button{background:var(--sea)}.board-intro{padding:22px 0}.board-seal{border-radius:2px;color:#6c7254}
.card,.board-panel .card{border:1px solid var(--line);border-radius:5px;background:#fffbef;box-shadow:0 2px #c5b59133}.card h3{overflow-wrap:anywhere}.tag{border-radius:3px;line-height:1.6;white-space:normal}.notice{background:#ece1c3;color:#6a5835;border-left:3px solid #b48c43;border-radius:0 3px 3px 0}.empty{padding:32px 18px;color:#758278;border:1px dashed #c7b99a;background:#eee7d5;border-radius:4px}
.inventory-top{border-bottom:1px solid var(--line);margin-bottom:18px;padding-bottom:10px}.inventory-top b{color:#88652e}.inventory-layout{grid-template-columns:minmax(0,1fr) 245px;gap:20px}
.inventory-slots{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.item-slot{border-radius:4px;border-color:#c5b898;background:#e6ddc5;box-shadow:inset 0 0 0 3px #f8f1df;min-height:124px;padding:12px 6px 26px}.item-slot:hover{background:#ddd4b9}.item-slot.selected{border-color:#386e7b;background:#dce7dc;box-shadow:inset 0 0 0 2px #386e7b}.item-slot.unused{background:#e9e1cd;box-shadow:inset 0 0 0 3px #f4eddd;opacity:.65}.item-name{line-height:1.5;overflow-wrap:anywhere}.item-detail{background:#eee4cc;border:1px solid #c9b58b;border-radius:4px;padding:18px;top:0}.item-detail h3{line-height:1.5}.item-detail>button{width:100%}
.shop-goods{gap:14px}.shop-goods .card{border-radius:4px;background:linear-gradient(#eee7d1,#fffaf0);padding:16px 12px}.shop-goods .item-art{min-height:74px;display:grid;place-items:center}.shop-goods h3{line-height:1.6}.shop-goods button{font-size:12px;min-height:38px}
.build-hint{white-space:normal;width:max-content;max-width:calc(100% - 32px);border:2px solid #ae8d50;background:#f5e2b3;border-radius:4px;text-align:center;line-height:1.7}.build-hint button{white-space:nowrap}#toast{border:1px solid #bfa16d;background:#193b49;color:#fff1d2;border-radius:4px;max-width:calc(100vw - 32px);overflow-wrap:anywhere}
.team-column,.team-player,.duel-match{border-radius:4px}.duel-match{background:#193b49}.duel-match h3{color:#f5dc9c}
/* Login: one clearly framed card, original castle art kept at its aspect ratio. */
body:has(dialog[data-view=auth][open]) .welcome-copy,body:has(dialog[data-view=auth][open]) .illustration-island{display:none}
#welcome-scene{background:radial-gradient(ellipse at 18% 22%,#8dc6be55,transparent 45%),repeating-linear-gradient(0deg,transparent 0 45px,#90c2c415 46px 47px),linear-gradient(145deg,#548e99,#235e75)}
dialog[data-view=auth]{width:min(880px,calc(100vw - 40px))}dialog[data-view=auth] .panel-head{padding:20px 28px}dialog[data-view=auth] #panelBody{padding:0}
.auth-layout{grid-template-columns:1fr 1.05fr;gap:0}.auth-layout>div:first-child{padding:32px;align-self:center}.auth-layout .muted{margin-top:0;font-size:13px}.auth-layout .stack{gap:18px}.auth-layout .full{margin-top:6px;min-height:46px;font-size:15px}.auth-foot{border-top:1px solid var(--line);padding-top:18px;color:#65736b}.auth-foot button{box-shadow:none;border:0;color:#286577}
.auth-preview{order:-1;border-radius:0;border-right:1px solid #ae986e;background:linear-gradient(#315f70,#204454);padding:30px 26px;text-align:center;align-items:center;position:relative;overflow:hidden}
.auth-kicker{font-size:11px;letter-spacing:3px;color:#c0d9d2}.auth-preview h3{font-size:34px;color:#f9e7bd;letter-spacing:5px;margin:12px 0 0}.auth-art{width:100%;max-width:290px;position:relative;margin:16px auto 4px}.auth-art:before{content:'';position:absolute;inset:25% 0 0;background:#82a79c33;border-radius:50%;border:1px solid #a4c1ad44}.auth-preview img{position:relative;width:100%;height:auto;object-fit:contain;filter:drop-shadow(0 8px 0 #102f4233)}.auth-preview p{font-size:14px;line-height:1.9;color:#d8e4d5}.auth-features{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin-top:8px}.auth-features span{font-size:10px;color:#ecdfbb;border:1px solid #80948a;padding:5px 8px;border-radius:2px}
.panel-head:after{content:'';width:60px;height:5px;background:var(--gold);position:absolute;bottom:-3px;left:26px}
@media(min-width:701px){dialog{border-image:url('/art/ui/parchment-frame.png') 12 / 8px stretch;border-width:8px}}
@media(max-width:900px){.island-tag{display:none}.shop-goods{grid-template-columns:repeat(3,minmax(0,1fr))}.inventory-layout{grid-template-columns:minmax(0,1fr) 210px}.inventory-slots{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){.topbar{height:62px;padding:0 12px;gap:8px}.brand{font-size:17px;letter-spacing:1px}.brand small{font-size:7px;letter-spacing:1px}.brand-icon{display:none}.top-actions{gap:5px}.top-actions .quiet{padding:6px 8px;font-size:11px}#online{display:none}#world{inset:62px 0 0}.identity{left:10px;top:10px;min-width:0;max-width:230px;padding:8px;gap:8px}.identity strong{max-width:95px}.identity .avatar{width:36px;height:36px}.coin{font-size:14px;padding-left:8px}.raid-chip{right:10px;top:90px;min-width:0;max-width:220px;padding:7px 10px}.beacon{font-size:24px}.keys{font-size:10px;padding:6px}.keys kbd{margin-left:5px}#dock{bottom:10px}#dock nav button{padding:8px 12px;font-size:12px}dialog,dialog.board-panel,dialog[data-view=auth]{width:calc(100vw - 20px);max-height:calc(100dvh - 20px);border-width:2px}.panel-head,.board-panel .panel-head,dialog[data-view=auth] .panel-head{padding:16px 18px}.panel-head h2,.board-panel .panel-head h2{font-size:19px}#panelBody{padding:18px}.board-panel #panelBody{padding:0 18px 20px}.grid{grid-template-columns:1fr}.auth-layout{grid-template-columns:1fr}.auth-layout>div:first-child{padding:22px}.auth-preview{display:none}.inventory-layout{grid-template-columns:1fr}.inventory-slots{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.item-slot{min-height:112px;font-size:11px}.item-detail{position:static}.shop-goods{grid-template-columns:repeat(2,minmax(0,1fr))}.board-navigation{align-items:stretch}.board-navigation .publish-button{width:100%}.build-hint{bottom:130px}.team-columns{grid-template-columns:1fr}}
@media(max-height:620px){dialog,dialog.board-panel{max-height:calc(100dvh - 16px)}.panel-head,.board-panel .panel-head{padding-top:12px;padding-bottom:12px}.auth-layout>div:first-child{padding:20px 28px}.auth-layout .stack{gap:12px}.auth-preview .auth-art{max-width:180px}.auth-preview{padding:18px}.keys{display:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}}
@media(max-width:700px){.item-detail>.item-art{float:none;display:grid;place-items:center;width:100%;margin:0 0 16px;padding:12px}.item-detail .armor-icon{width:128px;height:128px}.item-detail h3{clear:both}.item-slot .armor-icon{width:min(64px,100%);height:auto;aspect-ratio:1}.auth-preview{display:none}}

.audio-controls{display:grid;gap:14px}.audio-controls .field{display:grid;grid-template-columns:1fr auto;gap:8px}.audio-controls input[type=range]{grid-column:1/-1;accent-color:#326677;padding:0;min-height:30px;border:0;cursor:pointer}.audio-controls output{font-variant-numeric:tabular-nums;color:#796033}
/* Login island postcard: composited ambient layers, no game loop or mesh work. */
dialog[data-view=auth]{width:min(1000px,calc(100vw - 40px))}
.auth-layout{grid-template-columns:1fr 1fr}
.auth-preview{padding:24px 18px;background:linear-gradient(#235769,#123e50)}
.auth-preview .island-postcard{max-width:420px;aspect-ratio:1;margin:18px auto 0;overflow:hidden;border:1px solid #83b9b98c;border-radius:8px;contain:paint;background:#128ea6}
.island-postcard:before{display:none}
.auth-preview .island-postcard-image{display:block;width:100%;height:100%;object-fit:cover;filter:none;image-rendering:pixelated}
.island-atmosphere{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.auth-preview .login-cloud{position:absolute;width:32%;height:auto;filter:none;opacity:.8;image-rendering:pixelated;animation:login-cloud-drift 40s ease-in-out infinite alternate}
.login-cloud.cloud-one{left:-12%;top:9%}.login-cloud.cloud-two{right:-19%;top:68%;animation-delay:-21s;animation-duration:53s}
.login-gull{position:absolute;left:-60px;width:24px;height:32px;animation:login-gull-flight 26s linear infinite;will-change:transform}
.login-gull i{display:block;width:24px;height:32px;background:url('/art/gull_flight.png') 0 0 / 96px 32px;image-rendering:pixelated;animation:login-gull-wings .9s steps(4) infinite}
.gull-one{top:0%;animation-delay:-8s}.gull-two{top:88%;animation-duration:34s;animation-delay:-20s}.gull-three{top:3%;animation-duration:31s;animation-delay:-27s;scale:.75}.gull-two i{animation-delay:-.4s}
.login-wave{position:absolute;width:13px;height:2px;background:#b1f3ed;box-shadow:5px 3px #95e7e0;animation:login-water-shimmer 5s ease-in-out infinite;opacity:0}
.wave-one{left:8%;top:22%}.wave-two{left:87%;top:13%;animation-delay:-2s}.wave-three{left:20%;top:93%;animation-delay:-3.5s}
@keyframes login-gull-wings{to{background-position:-96px 0}}
@keyframes login-gull-flight{0%{transform:translate(-40px,0) rotate(8deg)}35%{transform:translate(180px,9px) rotate(-4deg)}70%{transform:translate(380px,-5px) rotate(4deg)}100%{transform:translate(620px,0) rotate(8deg)}}
@keyframes login-cloud-drift{to{transform:translate(26px,6px)}}
@keyframes login-water-shimmer{0%,100%{opacity:0;transform:translateX(-3px)}45%{opacity:.55}80%{opacity:0;transform:translateX(7px)}}
.welcome-island{background:none;box-shadow:none;animation:none;border-radius:0}.welcome-island img{width:100%;height:100%;object-fit:contain;image-rendering:pixelated}
@media(max-height:760px) and (min-width:701px){.auth-preview .island-postcard{max-width:300px}.auth-preview{padding:16px}.auth-preview h3{font-size:28px}.auth-preview p{margin:8px 0}.auth-art{margin-top:10px}}
@media(max-width:700px){dialog[data-view=auth]{width:calc(100vw - 20px)}.auth-layout{grid-template-columns:1fr}.auth-preview{display:block;padding:12px 16px;border-right:0;border-bottom:1px solid #ae986e}.auth-preview h3{font-size:24px;margin-top:5px}.auth-preview .island-postcard{max-width:220px;margin-top:10px}.auth-preview>p,.auth-features,.auth-kicker{display:none}.auth-layout>div:first-child{padding:20px}}
@media(prefers-reduced-motion:reduce){.island-atmosphere *{animation:none!important}.gull-one{transform:translate(130px,0)}.gull-two{transform:translate(220px,0)}.gull-three{display:none}}
/* Reward notices sit above open dialogs without taking keyboard focus. */
.reward-animation{position:fixed;inset:90px 24px auto auto;margin:0;min-width:210px;padding:18px 24px;border:2px solid #d6b476;border-radius:5px;background:#193b49f2;color:#fff0cd;box-shadow:0 6px 24px #102c4055;pointer-events:none;overflow:visible;z-index:10000}
.reward-animation strong{display:block;color:#e6c782;letter-spacing:2px;margin-bottom:8px}.reward-animation div{display:flex;align-items:center;gap:10px;margin-top:6px}.reward-animation img{width:40px;height:40px;object-fit:contain;image-rendering:pixelated}.reward-coins{font-size:23px;font-weight:bold}.reward-enter{animation:reward-rise 3.2s ease both}.reward-animation i{position:absolute;left:50%;top:50%;width:5px;height:5px;background:#eed490;animation:reward-spark .7s ease-out both;transform:rotate(var(--angle)) translateX(30px)}
@keyframes reward-rise{0%{opacity:0;transform:translateY(22px) scale(.9)}12%,85%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-16px)}}@keyframes reward-spark{0%{opacity:1;transform:rotate(var(--angle)) translateX(20px)}100%{opacity:0;transform:rotate(var(--angle)) translateX(120px)}}@media(prefers-reduced-motion:reduce){.reward-enter{animation:none}.reward-animation i{display:none}}
.class-tabs{display:flex;flex-wrap:wrap;gap:7px;padding:12px;background:#e9dfc6;border:1px solid #cabb98;border-radius:4px;margin:14px 0 10px}.class-tabs button{padding:8px 12px;font-size:12px}.equipment-slot-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}.item-profession{font-size:10px;color:#547078;line-height:1.4}.inventory-top{flex-wrap:wrap}.forge-panel{width:min(1020px,94vw)}.forge-grid{grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}.forge-grid>.empty{grid-column:1/-1}.class-tabs button[aria-pressed=true]{box-shadow:inset 0 -3px 0 #bca064}.inventory-slots .item-slot{min-height:140px}

.shop-goods .item-art>.furniture-icon,.shop-goods .item-art>.decoration-icon{width:72px;height:88px;object-fit:contain}.shop-goods .item-art{min-height:88px;display:flex;align-items:center;justify-content:center}