/* POCHIKO WORKS original landscape console. No third-party device geometry. */
:root {
  --pw-blue: #326bd7; --pw-blue-deep: #2055b6; --pw-pink: #f8c8d8;
  --pw-paper: #fff2f6; --pw-text: #252936;
  --cream: #fffafc; --beige: #f8c8d8; --beige-light: #fff2f6;
  --navy: #252936; --navy-soft: #536078; --ink: #252936;
  --sky: #cbdcff; --sky-deep: #2055b6; --yellow: #f8c8d8; --yellow-deep: #2055b6;
  --font-label: var(--font-body);
}
[hidden] { display: none !important; }
body { background: #fffafc; }
footer { background: var(--pw-paper); }
footer .foot-logo { color: #252936; }
footer .foot-en { color: #2055b6; }
footer .foot-copy { color: #536078; opacity: 1; }
header { background: rgba(255,250,252,.96); }
nav.main-nav a.btn-primary { color: white; }
a:focus-visible, button:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 3px solid #2055b6; outline-offset: 5px;
}
.skip-link { position: fixed; top: -100px; left: 16px; z-index: 110; padding: 12px 18px; background: white; color: #252936; }
.skip-link:focus { top: 12px; }
.pw-hero { padding: 98px 24px 50px; background: var(--pw-paper); text-align: center; }
.pw-intro { max-width: 780px; margin: auto; }
.pw-intro h1 { font-size: clamp(27px,3.4vw,44px); letter-spacing: -.035em; line-height: 1.4; }
.pw-intro h1 span { display: block; }
.pw-intro p { margin: 14px auto 20px; color: #536078; font-size: 15px; }
.pw-stage { width: min(620px,100%); margin: auto; perspective: 1400px; }
.pw-console {
  display: grid; grid-template-columns: 68px minmax(0,1fr) 68px; gap: 16px;
  padding: 25px 22px 22px; border: 2px solid #76a2f2;
  border-radius: 74px 74px 62px 62px; background: var(--pw-blue);
  box-shadow: inset 0 3px 0 #a3c1fa, inset 0 -9px 0 #245abd, 0 18px 0 -8px #d9aabe, 0 30px 40px -25px #4c609a;
  transform: rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));
  transition: transform .18s ease-out; position: relative;
}
.pw-console-center { min-width: 0; }
.pw-console-wordmark { color: white; font: 800 12px/1.4 var(--font-body); letter-spacing: .18em; margin: 0 0 10px; }
.pw-screen { display: block; position: relative; width: 100%; padding: 0; overflow: hidden; border: 8px solid #2055b6; border-radius: 22px; background: white; color: #252936; text-align: left; }
.pw-screen:focus-visible { outline-color: white; }
.pw-screen img { width: 100%; aspect-ratio: 16/9; object-fit: cover; object-position: top; }
.pw-screen-caption { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; background: white; font-size: 12px; gap: 10px; }
.pw-screen-caption strong { font-weight: 800; }
.pw-screen-caption span { color: #2055b6; white-space: nowrap; }
.pw-console-rail { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; }
.pw-nav-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.pw-nav-buttons button { width: 31px; height: 40px; padding: 0; border: 0; border-radius: 9px; background: #244fa2; color: white; font: 700 20px/1 sans-serif; box-shadow: 0 3px 0 #174286; }
.pw-start { border: 0; background: var(--pw-pink); color: #252936; width: 66px; height: 66px; border-radius: 50%; box-shadow: 0 5px 0 #d194ab; font: 900 12px/1 var(--font-body); }
.pw-select { background: #244fa2; color: white; border: 0; border-radius: 10px; min-height: 34px; padding: 7px; font: 700 10px/1 var(--font-body); }
.pw-console button:active { translate: 0 2px; }
.pw-console-rail button:focus-visible { outline-color: white; }
.pw-speaker { width: 34px; height: 24px; background: repeating-linear-gradient(0deg,#255ab8 0 3px,transparent 3px 7px); border-radius: 8px; }
.pw-device-help { margin-top: 22px; color: #536078; font-size: 12px; }
.pw-shelf { max-width: 900px; margin: 24px auto 0; display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 12px; }
.pw-cartridge { position: relative; border: 2px solid #d5def0; border-radius: 16px 16px 9px 9px; padding: 9px 9px 11px; background: white; color: #252936; text-align: left; min-width: 0; transition: transform .18s,border-color .18s; }
.pw-cartridge::before { content: ''; display: block; width: 34%; height: 4px; margin: -11px auto 6px; background: #c4d3ed; border-radius: 0 0 4px 4px; }
.pw-cartridge img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 6px; }
.pw-cartridge small { display: block; color: #536078; font-size: 10px; margin: 6px 0 2px; }
.pw-cartridge strong { display: block; font: 700 12px/1.5 var(--font-body); }
.pw-cartridge[aria-pressed=true] { border-color: var(--pw-blue-deep); background: #edf3ff; transform: translateY(-5px); }
.pw-cartridge[aria-pressed=true]::after { content: '選択中'; position: absolute; bottom: -22px; left: 0; width: 100%; color: #2055b6; font-size: 10px; text-align: center; font-weight: 700; }
.pw-actions { display: flex; justify-content: center; gap: 12px; align-items: center; margin-top: 34px; flex-wrap: wrap; }
.pw-actions .btn { min-height: 44px; }
.pw-mode-switch { display: inline-flex; gap: 8px; margin-top: 22px; font-size: 12px; color: #536078; cursor: pointer; align-items: center; }
.pw-mode-switch input { width: 18px; height: 18px; accent-color: #2055b6; }
.pw-static .pw-console { transform: none; }
.pw-static .pw-stage { display: none; }
/* Game controls require the console script. Static sample links work without it.
   The reveal-animation .js class can be removed later, so it is not a mode flag. */
body:not(.pw-game-ready) :is(.pw-stage,.pw-device-help,.pw-mode-switch) { display: none; }
.pw-static .pw-shelf { display: none; }
.pw-static .pw-device-help { display: none; }
.pw-status { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; clip-path: inset(50%); overflow: hidden; }
.pw-work-list { padding: 12px 0 0; }
.pw-work-list .section-head { margin-bottom: 30px; }
.pw-work-list .section-head h2 { font-size: 30px; }
.pw-work-list ul { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px 36px; }
.pw-work-list li { display: grid; grid-template-columns: 130px minmax(0,1fr); gap: 16px; align-items: start; }
.pw-work-list img { aspect-ratio: 16/10; object-fit: cover; object-position: top; border-radius: 10px; }
.pw-work-list h3 { font-size: 18px; }
.pw-work-list p { margin: 8px 0; font-size: 13px; color: #536078; }
.pw-work-list a { font-size: 13px; color: #2055b6; text-decoration: underline; text-underline-offset: 4px; }
.pw-additional { margin-top: 36px; color: #536078; font-size: 14px; }
.pw-additional summary { cursor: pointer; }
.pw-additional p { margin-top: 12px; }
.pw-dialog { padding: 0; width: min(1160px,calc(100vw - 72px)); height: min(850px,calc(100dvh - 48px)); max-width: none; max-height: none; border: 22px solid var(--pw-blue); border-top-width: 12px; border-radius: 32px; background: var(--pw-blue); color: #252936; overflow: hidden; }
.pw-dialog::backdrop { background: rgba(20,34,68,.68); }
.pw-dialog[open] { display: grid; grid-template-rows: auto auto minmax(0,1fr); }
.pw-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 0 0 10px; flex-wrap: wrap; }
.pw-toolbar-brand { color: white; font-weight: 800; font-size: 12px; letter-spacing: .1em; }
.pw-toolbar-controls { display: flex; gap: 6px; }
.pw-toolbar button { border: 0; border-radius: 9px; background: white; color: #2055b6; min-height: 36px; padding: 6px 12px; font: 700 12px/1.4 var(--font-body); }
.pw-toolbar button:focus-visible { outline-color: white; outline-offset: 2px; }
.pw-viewer-picker { display: flex; align-items: center; gap: 10px; padding: 0 0 10px; }
.pw-viewer-picker label { color: white; font-size: 12px; }
.pw-viewer-picker select { min-height: 40px; border: 0; border-radius: 8px; background: white; color: #252936; padding: 6px 12px; flex: 1; min-width: 0; }
.pw-viewer-picker select:focus-visible { outline-color: white; }
.pw-viewer-picker .pw-viewer-start { border: 0; border-radius: 9px; background: var(--pw-pink); color: #252936; padding: 10px 18px; min-height: 40px; font-weight: 800; }
.pw-display { position: relative; overflow: hidden; background: white; border-radius: 14px; min-height: 0; }
.pw-preview { height: 100%; display: flex; flex-direction: column; overflow-y: auto; }
.pw-preview img { width: 100%; min-height: 0; flex: 1; object-fit: cover; object-position: top; }
.pw-preview-copy { background: white; padding: 20px 28px; }
.pw-preview-copy h2 { font-size: 24px; }
.pw-preview-copy p { color: #536078; font-size: 14px; }
.pw-iframe { display: block; width: 100%; height: 100%; border: 0; background: white; }
.pw-loading { position: absolute; inset: 0; z-index: 1; display: grid; place-content: center; background: white; color: #2055b6; font-size: 16px; }
.pw-loading a { text-decoration: underline; color: #2055b6; }
body.pw-viewer-open { overflow: hidden; }
.pw-dialog.pw-enter { animation: pw-enter .32s cubic-bezier(.2,.7,.2,1); }
@keyframes pw-enter { from { opacity: 0; transform: scale(.88) translateY(28px); } to { opacity: 1; transform: none; } }
@media (hover:hover) and (prefers-reduced-motion:no-preference) { .pw-cartridge:hover { transform: translateY(-5px); } }
@media (max-width:880px) {
  .pw-hero { padding-top: 92px; }
  .pw-work-list ul { grid-template-columns: 1fr; }
}
@media (max-width:600px) {
  .pw-hero { padding: 88px 16px 40px; }
  .pw-intro h1 { font-size: clamp(25px,6.7vw,34px); }
  .pw-intro p { margin: 10px auto 16px; font-size: 12px; }
  .pw-console { grid-template-columns: 32px minmax(0,1fr) 36px; gap: 7px; padding: 16px 11px 16px; border-radius: 42px 42px 32px 32px; box-shadow: inset 0 2px 0 #a3c1fa,inset 0 -6px 0 #245abd,0 20px 28px -18px #4c609a; }
  .pw-console-wordmark { font-size: 8px; margin-bottom: 6px; letter-spacing: .08em; }
  .pw-screen { border-width: 4px; border-radius: 12px; }
  .pw-screen-caption { padding: 6px 7px; font-size: 9px; gap: 3px; }
  .pw-screen-caption span { font-size: 8px; }
  .pw-start { width: 36px; height: 36px; font-size: 8px; box-shadow: 0 3px 0 #d194ab; }
  .pw-nav-buttons { grid-template-columns: 1fr; gap: 6px; }
  .pw-nav-buttons button { width: 28px; height: 29px; font-size: 16px; }
  .pw-select { padding: 5px 1px; width: 36px; font-size: 7px; min-height: 25px; }
  .pw-console-rail { gap: 14px; }
  .pw-speaker { width: 22px; height: 20px; }
  .pw-device-help { margin-top: 18px; font-size: 11px; }
  .pw-shelf { gap: 10px; overflow-x: auto; grid-template-columns: repeat(5,116px); padding: 10px 4px 24px; margin-top: 8px; scroll-snap-type: x proximity; }
  .pw-cartridge { scroll-snap-align: center; }
  .pw-cartridge small { font-size: 10px; }
  .pw-actions { margin-top: 12px; gap: 8px; }
  .pw-actions .btn { padding: 10px 16px; font-size: 13px; }
  .pw-work-list li { grid-template-columns: 100px minmax(0,1fr); }
  .pw-dialog { width: 100%; height: 100dvh; margin: 0; border: 6px solid var(--pw-blue); border-radius: 14px; }
  .pw-toolbar { gap: 4px; padding: 1px 0 6px; }
  .pw-toolbar-brand { font-size: 9px; letter-spacing: 0; }
  .pw-toolbar button { min-height: 40px; padding: 5px 8px; font-size: 10px; }
  .pw-viewer-picker { gap: 6px; padding-bottom: 6px; }
  .pw-viewer-picker label { font-size: 10px; }
  .pw-viewer-picker select { font-size: 12px; padding: 6px; }
  .pw-viewer-picker .pw-viewer-start { padding: 10px; font-size: 11px; }
  .pw-display { border-radius: 7px; }
  .pw-preview-copy { padding: 16px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto; }
  .pw-console, .pw-cartridge, .pw-dialog { animation: none !important; transition: none !important; transform: none !important; }
  .js .reveal { opacity: 1; transform: none; }
}