/* Click to Play shell. The original game's 700px canvas and controls stay intact. */
:root { --ink: #172638; --paper: #fffaf0; --coral: #f47d6d; --yellow: #ffcf47; }
html { scroll-behavior: smooth; }
body { height: auto; min-height: 100%; background: var(--paper); color: var(--ink); font-family: Arial, sans-serif; }
a { color: inherit; }
a:focus-visible, .menuBtn:focus-visible { outline: 3px solid var(--coral); outline-offset: 4px; }
.portal-header, .portal-footer, .workspace-heading, .game-toolbar { font-family: Arial, sans-serif; }
.portal-header { height: 82px; padding: 0 clamp(22px, 4.5vw, 80px); display: flex; align-items: center; justify-content: space-between; gap: 20px; background: var(--paper); border-bottom: 1px solid #dcded5; }
.portal-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-size: 29px; font-weight: 800; letter-spacing: -.09em; line-height: 1; white-space: nowrap; }
.portal-mark { display: grid; place-items: center; width: 36px; height: 36px; flex: none; background: var(--coral); border: 2px solid var(--ink); border-radius: 50%; font-size: 25px; letter-spacing: 0; transition: transform .3s; }
.portal-brand:hover .portal-mark { transform: rotate(90deg); }
.portal-to, .portal-dot { color: #ee7567; }
.portal-back { color: var(--ink); text-decoration: none; font-size: 13px; font-weight: 700; border-bottom: 1px solid var(--ink); padding-bottom: 4px; }
.portal-back:hover { color: #c45449; border-color: currentColor; }
.portal-workspace { max-width: 1280px; margin: auto; padding: 28px clamp(22px, 6vw, 90px) 72px; }
.workspace-heading { display: flex; justify-content: space-between; gap: 16px; border-top: 2px solid var(--ink); padding-top: 16px; font-size: 11px; font-weight: 800; letter-spacing: .14em; }
div#wrapper { padding-top: 28px; padding-bottom: 12px; }
div#saveNotify { top: 94px; background: var(--paper); z-index: 20; }
div#notifyGradient { background: linear-gradient(to bottom, #fffaf000, var(--paper)); }
#notifications { line-height: 1.5; color: #445468; }
#header { font-weight: 700; }
.headerButton { border-left-color: var(--ink); transition: color .2s; }
.headerButton:hover, .headerButton.selected { color: #bd4f41; }
/* The original cooldown bar has z-index: -1. Isolate each button so it paints above its background. */
.portal-workspace div.button { isolation: isolate; background: var(--yellow); color: var(--ink); border: 1.5px solid var(--ink); border-radius: 5px; font-family: Arial, sans-serif; font-size: 13px; font-weight: 700; transition: background .2s, transform .2s, box-shadow .2s; }
.portal-workspace div.button:hover { z-index: 30; }
.portal-workspace div.button:not(.disabled):hover { background: #ffc0af; text-decoration: none; transform: translate(-2px, -2px); box-shadow: 3px 3px 0 var(--ink); }
.portal-workspace div.button.disabled { background: #f3efe6; border-color: #78838a; color: #283949; box-shadow: none; }
.portal-workspace div.button div.cooldown { background: #f59981; border-radius: 4px; }
#stores, #weapons, #outsidePanel, #village, #dropMenu { border-color: var(--ink); }
div#stores:before, div#weapons:before, div#outsidePanel:before, div#village:before, div#population, #dropMenu, #dropMenu:before { background: var(--paper); }
.eventPanel { background: var(--paper); }
.eventPanel:before, .eventTitle:after { background: var(--paper); }
.eventPanel:after { box-shadow: 6px 6px 0 var(--ink); }
.tooltip { background: var(--paper); color: var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.game-toolbar { max-width: 920px; margin: 18px auto 0; padding-top: 20px; border-top: 1px solid #cdd1cc; min-height: 65px; }
.game-toolbar .menu { position: static; display: flex; flex-wrap: wrap; align-items: center; gap: 11px 18px; color: #4b5964; font-size: 12px; font-weight: 700; }
.game-toolbar .menu > span { float: none; margin: 0; border-bottom: 1px solid transparent; }
.game-toolbar .menu > span:hover { color: #bf5143; text-decoration: none; border-color: currentColor; }
.game-toolbar .customSelect { position: relative; width: 120px; order: 10; }
.game-toolbar .customSelectOptions > ul { bottom: 0; right: 0; max-height: 21px; background: var(--paper); z-index: 30; }
.game-toolbar .customSelectOptions > ul:hover { max-height: 230px; overflow-y: auto; border: 1px solid var(--ink); padding: 5px; box-shadow: 3px 3px 0 var(--ink); }
.game-toolbar .customSelectOptions > ul > li { height: auto; min-height: 20px; }
.portal-footer { background: var(--ink); color: var(--paper); padding: 42px clamp(22px, 6vw, 90px) 24px; }
.portal-footer-top, .portal-footer-bottom { max-width: 1100px; margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.portal-footer .portal-brand { color: var(--paper); font-size: 27px; }
.portal-original { color: #cbd5d3; font-size: 12px; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.portal-original:hover { color: var(--paper); }
.portal-footer-bottom { margin-top: 52px; border-top: 1px solid #ffffff44; padding-top: 18px; color: #cbd5d3; font-size: 12px; }
.portal-footer .logo { position: static; display: inline-flex; }
.portal-footer .logo-icon { height: 25px; width: 33px; }
.portal-footer .logo-icon > path { stroke: var(--paper); }
@media (max-width: 1050px) { .portal-workspace { overflow-x: auto; } #wrapper, .game-toolbar { margin-left: 0; margin-right: 0; } }
@media (max-width: 700px) { .portal-header { height: 66px; padding: 0 20px; } .portal-brand { font-size: 23px; gap: 7px; } .portal-mark { width: 30px; height: 30px; font-size: 21px; } .portal-back { font-size: 11px; } .portal-workspace { padding: 40px 20px 60px; } .workspace-heading { font-size: 9px; } .workspace-heading > span:last-child { display: none; } .portal-footer { padding: 40px 22px 24px; } .portal-footer .portal-brand { font-size: 22px; } }
@media (prefers-reduced-motion: reduce) { .portal-mark, .portal-workspace div.button, .headerButton { transition: none; } }