Add ink integration UI and media playback

public/css/style.css

@@ -421,6 +421,54 @@ ol.choice {
     overflow-anchor: none;
 }
 
+.story-image-block {
+    box-sizing: border-box;
+    margin: 0 auto;
+    padding: 0;
+    overflow: hidden;
+    background: transparent;
+}
+
+.story-image-block img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    mix-blend-mode: multiply;
+    filter: contrast(1.05);
+}
+
+.story-image-landscape,
+.story-image-square {
+    clear: both;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.story-image-portrait {
+    float: left;
+    margin-left: 0;
+    margin-right: 0;
+    shape-outside: inset(0);
+}
+
+.story-image-portrait.story-image-float-right {
+    float: right;
+    margin-left: 0;
+    margin-right: 0;
+}
+
+.story-image-pending img {
+    opacity: 0;
+    clip-path: polygon(0 0, 0 0, 0 0);
+}
+
+.story-image-visible img {
+    opacity: 1;
+    clip-path: polygon(0 0, 220% 0, 0 220%);
+    transition: opacity 900ms ease, clip-path 900ms ease;
+}
+
 /* #story p span {
     font-feature-settings: 'kern' on, 'liga' on, 'onum' on, 'clig' on, 'hlig' on;
 } */
@@ -547,10 +595,22 @@ ol.choice {
     position: absolute;
     left: 0;
     right: 0;
-    bottom: 0;
+    bottom: 0.65rem;
     text-align: center;
     margin: 0 auto;
     background-color: transparent;
+    line-height: 1.1;
+    pointer-events: none;
+}
+
+#remark_hint {
+    font-size: 0.82rem;
+}
+
+#game_legal {
+    margin-top: 0.18rem;
+    font-size: 0.72rem;
+    color: rgba(0, 0, 0, 0.62);
 }
 
 #lighting {
@@ -596,6 +656,17 @@ body:not([data-game-running="true"]) #command_history {
 #command_history .history-item {
     margin-bottom: 0.25rem;
     color: rgba(0, 0, 0, 0.82);
+    cursor: pointer;
+    transition: color 160ms ease, opacity 160ms ease;
+}
+
+#command_history .history-item:hover,
+#command_history .history-item.active {
+    color: rgba(0, 0, 0, 1);
+}
+
+#command_history .history-item.active {
+    font-weight: 600;
 }
 
 #command_history::-webkit-scrollbar {
@@ -633,6 +704,76 @@ body:not([data-game-running="true"]) #command_history {
     pointer-events: none; /* Prevent interaction while faded out */
 }
 
+.story-choices {
+    width: 100%;
+    margin: 0 0 1rem 0;
+    opacity: 0;
+    transition: opacity 0.45s ease;
+    pointer-events: none;
+}
+
+.story-choices[hidden] {
+    display: none;
+}
+
+html[data-process-state="waiting-generating"] .story-choices,
+html[data-process-state="playing-generating"] .story-choices,
+html[data-process-state="playing-ready"] .story-choices,
+html[data-process-state="command-waiting"] .story-choices {
+    opacity: 0;
+    pointer-events: none;
+}
+
+html[data-process-state="ready"] .story-choices[data-choice-ready="true"] {
+    opacity: 1;
+    pointer-events: auto;
+}
+
+.choice-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+.choice-list-item {
+    margin: 0 0 0.45rem 0;
+}
+
+.choice-list .choice-button {
+    display: grid;
+    grid-template-columns: 1.8em 1fr;
+    align-items: baseline;
+    gap: 0.45rem;
+    width: 100%;
+    padding: 0.15rem 0;
+    border: 0;
+    background: transparent;
+    color: rgba(37, 31, 24, 0.72);
+    font-family: inherit;
+    font-size: 1rem;
+    line-height: 1.25;
+    text-align: left;
+    cursor: pointer;
+    transition: color 0.25s ease, opacity 0.25s ease;
+}
+
+.choice-list .choice-button:hover,
+.choice-list .choice-button:focus-visible {
+    color: rgba(0, 0, 0, 0.96);
+    text-decoration: none;
+    outline: none;
+}
+
+.choice-list kbd {
+    display: inline-block;
+    min-width: 1.4em;
+    font-family: inherit;
+    font-size: 0.85em;
+    font-weight: 700;
+    text-align: center;
+    border-bottom: 0;
+}
+
 /* Input wrapper for positioning cursor */
 .input-wrapper {
     position: relative;
@@ -745,15 +886,18 @@ html[data-process-state="playing-ready"] * {
 #story p.story-chapter-heading {
   position: relative;
   height: auto;
-  margin: 0 0 1.45em 0;
   text-align: center;
   font-size: 1.2rem;
   font-style: italic;
   line-height: 1.45;
 }
 
-#story p.story-textblock-start {
-  margin-top: 1.45em;
+#story p.story-section-heading {
+  position: relative;
+  height: auto;
+  text-align: center;
+  font-style: normal;
+  line-height: 1.45;
 }
 
 /* Typography for word elements in rendered paragraphs */